Border
Border Color
The Border Color setting allows you to define custom colors for each individual side (Left, Right, Top, Bottom) of a widget’s border. This provides granular styling control for creating visually distinct and dynamic layouts.
How It Works
Each border side (Left, Right, Top, Bottom) includes a dropdown with two options:
Unset
Clears any previously applied border color for that side (inherits default or none).
Set
Enables a color picker to manually select a custom border color.
Once Set is selected, a color indicator dot and color picker appear next to the side, allowing you to choose a specific color.
Border Style
The Border Style setting allows users to define the visual pattern used for each side of a widget’s border (Left, Right, Top, Bottom). This lets you customize the appearance of borders for structure, emphasis, or design consistency.
Dropdown Options:
When expanded, each dropdown presents the following style options:
Dashed
A dashed line. Often used to indicate temporary or editable boundaries.
Dotted
A dotted line. Ideal for subtle or non-blocking borders.
Double
Two solid lines. Used for emphasis or strong visual separation.
Groove
A carved border that gives a 3D "inset" effect based on border color.
Hidden
Hides the border completely (unlike none, still affects layout in some cases).
Inset
Creates a border that makes the element appear embedded or pushed in.
Outset
Gives a raised appearance as if the element is coming out of the screen.
Ridge
Similar to groove, but reversed 3D effect (raised instead of inset).
Solid
A single solid line. Common and clean for most design needs.
Unset
Clears the applied style, allowing it to inherit or remain undefined.
Border Width
The Border Width property allows you to define the thickness of the border on each side of a widget (Left, Right, Top, Bottom). This provides fine-grained control over layout appearance and element emphasis.
Interface Overview
Each border side has two input fields:
Value Field (middle):
A numeric input where you define the width (e.g.,
1,5,10).You can leave it blank if you want to skip applying a width.
Unit Selector (right dropdown):
Choose the unit of measurement or a predefined keyword.
The unit affects how the numeric value is interpreted.
Available Units and Keywords
px
Absolute unit
Pixels — most commonly used for fixed widths.
rem
Relative unit
Relative to the root font size. Useful for scalable layouts.
%
Relative unit
Percentage of the element's containing block (less commonly used for borders).
vw
Relative unit
Percentage of the viewport’s width.
vh
Relative unit
Percentage of the viewport’s height.
Unset
Keyword
Removes the width setting and allows it to inherit or default.
Medium
Keyword
Applies a browser-defined medium thickness (usually 3–4px).
Thick
Keyword
Applies a predefined thick border.
Thin
Keyword
Applies a predefined thin border.
Border Radius
The Border Radius property controls the roundness of an element’s corners. You can apply rounding to each corner individually to create smooth, circular, or pill-shaped effects.
Interface Overview
Each corner of the element — Top Left, Top Right, Bottom Left, Bottom Right — has:
Value Field (middle): A text input where you enter the radius amount (e.g.,
5,10,20).Unit Selector (right): A dropdown to choose the unit of measurement or an unset option.
Available Units
px
Absolute unit
Pixels. Most commonly used for exact control over corner rounding.
rem
Relative unit
Relative to the root font size. Scales with typography.
%
Relative unit
Percentage of the element’s size. 50% makes a perfect circle/ellipse.
vw
Relative unit
Based on viewport width — useful for responsive designs.
vh
Relative unit
Based on viewport height.
Unset
Keyword
Clears the current setting. Inherits or falls back to default (no rounding).
Last updated