Borders

In Elements, borders are easy to add, customize, and control, allowing you to create clean and consistent boundaries around components with minimal effort. Elements provides a range of options for setting border width, border color, border style, and even border radius (for rounded corners). This flexibility makes it simple to define borders that suit your design, from subtle outlines to bold accents.

Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with Transitions.

Type Properties	Description
None	No effect classes will be applied to the component.
Static	Enable effects.
Hover	Enable Start and End state hover effects.

Style

The Style control allows you to choose between three distict border styles, solid, dashed, and dotted.

Style Properties	Description
Solid	No effect classes will be applied to the component.
Dashed	Enable effects.
Dotted	Enable Start and End state hover effects.

Colour and Opacity

Define a colour and oppacity for the border. Colour swatches are defined in the Theme Studio.

Width

The Width property controls the thickness of the border. Width can be set for all four sides of an element—top, right, bottom, and left—or individually for each side. A custom pixel value can also be set.

Radius

The Radius property controls the roundness of the border. Radius can be set for all four sides of an element—top, right, bottom, and left—or individually for each side. A custom pixel value can also be set.

Border UI in Elements