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
Last updated