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 PropertiesDescription

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 PropertiesDescription

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

Last updated

We are Realmac Software. We make nice things.