| description |
|---|
Set a radius, colour, width and more. |
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.
{% embed url="https://youtu.be/PaWL7Vieoh8?si=Y56iftuks4qwy6z1" %}
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. |
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. |
Define a colour and oppacity for the border. Colour swatches are defined in the Theme Studio.
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.
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.
