Class StyleBoxFlat

A customizable StyleBox that doesn't use a texture.

Inheritance

StyleBox

Resource

RefCounted

Object

StyleBoxFlat

Remarks

By configuring various properties of this style box, you can achieve many common looks without the need of a texture. This includes optionally rounded borders, antialiasing, shadows, and skew.

Setting corner radius to high values is allowed. As soon as corners overlap, the stylebox will switch to a relative system:

• text
• text

height = 30
corner_radius_top_left = 50
corner_radius_bottom_left = 100

The relative system now would take the 1:2 ratio of the two left corners to calculate the actual corner width. Both corners added will never be more than the height. Result:

Properties

anti_aliasing

Antialiasing draws a small ring around the edges, which fades to transparency. As a result, edges look much smoother. This is only noticeable when using rounded corners or skew.

Note: When using beveled corners with 45-degree angles (corner_detail = 1), it is recommended to set anti_aliasing to false to ensure crisp visuals and avoid possible visual glitches.

var anti_aliasing : bool = true

Property Value

bool

Remarks

• void set_anti_aliased(bool value)
• bool is_anti_aliased

anti_aliasing_size

This changes the size of the antialiasing effect. 1.0 is recommended for an optimal result at 100% scale, identical to how rounded rectangles are rendered in web browsers and most vector drawing software.

Note: Higher values may produce a blur effect but can also create undesired artifacts on small boxes with large-radius corners.

var anti_aliasing_size : float = 1.0

Property Value

float

Remarks

• void set_aa_size(float value)
• float get_aa_size

bg_color

The background color of the stylebox.

var bg_color : Color = Color(0.6, 0.6, 0.6, 1)

Property Value

Color

Remarks

• void set_bg_color(Color value)
• Color get_bg_color

border_blend

If true, the border will fade into the background color.

var border_blend : bool = false

Property Value

bool

Remarks

• void set_border_blend(bool value)
• bool get_border_blend

border_color

Sets the color of the border.

var border_color : Color = Color(0.8, 0.8, 0.8, 1)

Property Value

Color

Remarks

• void set_border_color(Color value)
• Color get_border_color

border_width_bottom

Border width for the bottom border.

var border_width_bottom : int = 0

Property Value

int

Remarks

• void set_border_width(int margin, int width)
• int get_border_width(int margin)

border_width_left

Border width for the left border.

var border_width_left : int = 0

Property Value

int

Remarks

• void set_border_width(int margin, int width)
• int get_border_width(int margin)

border_width_right

Border width for the right border.

var border_width_right : int = 0

Property Value

int

Remarks

• void set_border_width(int margin, int width)
• int get_border_width(int margin)

border_width_top

Border width for the top border.

var border_width_top : int = 0

Property Value

int

Remarks

• void set_border_width(int margin, int width)
• int get_border_width(int margin)

corner_detail

This sets the number of vertices used for each corner. Higher values result in rounder corners but take more processing power to compute. When choosing a value, you should take the corner radius (StyleBoxFlat.set_corner_radius_all) into account.

For corner radii less than 10, 4 or 5 should be enough. For corner radii less than 30, values between 8 and 12 should be enough.

A corner detail of 1 will result in chamfered corners instead of rounded corners, which is useful for some artistic effects.

var corner_detail : int = 8

Property Value

int

Remarks

• void set_corner_detail(int value)
• int get_corner_detail

corner_radius_bottom_left

The bottom-left corner's radius. If 0, the corner is not rounded.

var corner_radius_bottom_left : int = 0

Property Value

int

Remarks

• void set_corner_radius(int corner, int radius)
• int get_corner_radius(int corner)

corner_radius_bottom_right

The bottom-right corner's radius. If 0, the corner is not rounded.

var corner_radius_bottom_right : int = 0

Property Value

int

Remarks

• void set_corner_radius(int corner, int radius)
• int get_corner_radius(int corner)

corner_radius_top_left

The top-left corner's radius. If 0, the corner is not rounded.

var corner_radius_top_left : int = 0

Property Value

int

Remarks

• void set_corner_radius(int corner, int radius)
• int get_corner_radius(int corner)

corner_radius_top_right

The top-right corner's radius. If 0, the corner is not rounded.

var corner_radius_top_right : int = 0

Property Value

int

Remarks

• void set_corner_radius(int corner, int radius)
• int get_corner_radius(int corner)

draw_center

Toggles drawing of the inner part of the stylebox.

var draw_center : bool = true

Property Value

bool

Remarks

• void set_draw_center(bool value)
• bool is_draw_center_enabled

expand_margin_bottom

Expands the stylebox outside of the control rect on the bottom edge. Useful in combination with border_width_bottom to draw a border outside the control rect.

Note: Unlike content_margin_bottom, expand_margin_bottom does not affect the size of the clickable area for Controls. This can negatively impact usability if used wrong, as the user may try to click an area of the StyleBox that cannot actually receive clicks.

var expand_margin_bottom : float = 0.0

Property Value

float

Remarks

• void set_expand_margin(int margin, float size)
• float get_expand_margin(int margin)

expand_margin_left

Expands the stylebox outside of the control rect on the left edge. Useful in combination with border_width_left to draw a border outside the control rect.

Note: Unlike content_margin_left, expand_margin_left does not affect the size of the clickable area for Controls. This can negatively impact usability if used wrong, as the user may try to click an area of the StyleBox that cannot actually receive clicks.

var expand_margin_left : float = 0.0

Property Value

float

Remarks

• void set_expand_margin(int margin, float size)
• float get_expand_margin(int margin)

expand_margin_right

Expands the stylebox outside of the control rect on the right edge. Useful in combination with border_width_right to draw a border outside the control rect.

Note: Unlike content_margin_right, expand_margin_right does not affect the size of the clickable area for Controls. This can negatively impact usability if used wrong, as the user may try to click an area of the StyleBox that cannot actually receive clicks.

var expand_margin_right : float = 0.0

Property Value

float

Remarks

• void set_expand_margin(int margin, float size)
• float get_expand_margin(int margin)

expand_margin_top

Expands the stylebox outside of the control rect on the top edge. Useful in combination with border_width_top to draw a border outside the control rect.

Note: Unlike content_margin_top, expand_margin_top does not affect the size of the clickable area for Controls. This can negatively impact usability if used wrong, as the user may try to click an area of the StyleBox that cannot actually receive clicks.

var expand_margin_top : float = 0.0

Property Value

float

Remarks

• void set_expand_margin(int margin, float size)
• float get_expand_margin(int margin)

shadow_color

The color of the shadow. This has no effect if shadow_size is lower than 1.

var shadow_color : Color = Color(0, 0, 0, 0.6)

Property Value

Color

Remarks

• void set_shadow_color(Color value)
• Color get_shadow_color

shadow_offset

The shadow offset in pixels. Adjusts the position of the shadow relatively to the stylebox.

var shadow_offset : Vector2 = Vector2(0, 0)

Property Value

Vector2

Remarks

• void set_shadow_offset(Vector2 value)
• Vector2 get_shadow_offset

shadow_size

The shadow size in pixels.

var shadow_size : int = 0

Property Value

int

Remarks

• void set_shadow_size(int value)
• int get_shadow_size

skew

If set to a non-zero value on either axis, skew distorts the StyleBox horizontally and/or vertically. This can be used for "futuristic"-style UIs. Positive values skew the StyleBox towards the right (X axis) and upwards (Y axis), while negative values skew the StyleBox towards the left (X axis) and downwards (Y axis).

Note: To ensure text does not touch the StyleBox's edges, consider increasing the StyleBox's content margin (see content_margin_bottom). It is preferable to increase the content margin instead of the expand margin (see expand_margin_bottom), as increasing the expand margin does not increase the size of the clickable area for Controls.

var skew : Vector2 = Vector2(0, 0)

Property Value

Vector2

Remarks

• void set_skew(Vector2 value)
• Vector2 get_skew

Methods

get_border_width(int)

Qualifiers: const

Returns the specified Side's border width.

int get_border_width(int margin)

Parameters

margin int

get_border_width_min

Qualifiers: const

Returns the smallest border width out of all four borders.

int get_border_width_min

get_corner_radius(int)

Qualifiers: const

Returns the given corner's radius. See Corner for possible values.

int get_corner_radius(int corner)

Parameters

corner int

get_expand_margin(int)

Qualifiers: const

Returns the size of the specified Side's expand margin.

float get_expand_margin(int margin)

Parameters

margin int

set_border_width(int, int)

Sets the specified Side's border width to width pixels.

void set_border_width(int margin, int width)

Parameters

margin int

width int

set_border_width_all(int)

Sets the border width to width pixels for all sides.

void set_border_width_all(int width)

Parameters

width int

set_corner_radius(int, int)

Sets the corner radius to radius pixels for the given corner. See Corner for possible values.

void set_corner_radius(int corner, int radius)

Parameters

corner int

radius int

set_corner_radius_all(int)

Sets the corner radius to radius pixels for all corners.

void set_corner_radius_all(int radius)

Parameters

radius int

set_expand_margin(int, float)

Sets the expand margin to size pixels for the specified Side.

void set_expand_margin(int margin, float size)

Parameters

margin int

size float

set_expand_margin_all(float)

Sets the expand margin to size pixels for all sides.

void set_expand_margin_all(float size)

Parameters

size float