Learn how to set a border to your elements with the border utilities to modify and design your elements easily with shorthand classes
in the table below you can find a list of shorthand for the most common border properties as class names to set a border for any element.
| Class | Description | Markup |
|---|---|---|
| radiuseset | Reset the Default Border of the element. | <any> |
| border-solid | set a border-style of solid | <any> |
| border-dashed | set a border-style of dashed | <any> |
| border-dotted | set a border-style of dotted | <any> |
| Borders Sizes | ||
| border-1 | set a border-width of 1px | <any> |
| border-2 | set a border-width of 2px | <any> |
| border-3 | set a border-width of 3px | <any> |
| border-4 | set a border-width of 4px | <any> |
| border-5 | set a border-width of 5px | <any> |
| border-6 | set a border-width of 6px | <any> |
| border-${direction}-#size | set a border-width of #size to any direction [top, bottom, start, end]. | <any> |
| border-${breakpoint}-#size | set a border-width of #size from any screen and up. | <any> |
| Dividers Lines | ||
| divider-t | set a border-top with alpha color to divide between elements. | <any> |
| divider-b | set a border-bottom with alpha color to divide between elements. | <any> |
| divider-y | set a border-top and border-bottom with alpha color to divide between elements. | <any> |
| divider-s | set a border-{start} with alpha color to divide between elements. | <any> |
| divider-e | set a border-{end} with alpha color to divide between elements. | <any> |
| divider-x | set a border-left and radiusight with alpha color to divide between elements. | <any> |
| Borders Radius | ||
| radius-sm | set a radiusadius of 4px | <any> |
| radius-md | set a radiusadius of 6px | <any> |
| radius-lg | set a radiusadius of 8px | <any> |
| radius-xl | set a radiusadius of 10px | <any> |
| radius-xxl | set a radiusadius of 15px | <any> |
| radius-none | set a radiusadius of 0 | <any> |
| radius-circle | set a radiusadius of 50% | <any> |
| radius-height | set a radiusadius of var(--height) for our components full rounded pill shape | <any> |
| radius-top | set the radius to top | <.radius-*> |
| radius-bottom | set the radius to bottom | <.radius-*> |
| radius-start | set the radius to page direction start | <.radius-*> |
| radius-end | set the radius to page direction end | <.radius-*> |
in the table below you can find a list of shorthand for the most common border-colors property as class names to set a border-color for any element.
you can customize the colors from the CSS Customization document with css variables.
| Classname | Description | Markup |
|---|---|---|
| .border-primary | set a border color of : for any element. | <any> |
| .border-secondary | set a border color of : for any element. | <any> |
| .border-success | set a border color of : for any element. | <any> |
| .border-danger | set a border color of : for any element. | <any> |
| .border-warning | set a border color of : for any element. | <any> |
| .border-light | set a border color of : for any element. | <any> |
| .border-info | set a border color of : for any element. | <any> |
| .border-gray | set a border color of : for any element. | <any> |
| .border-dark | set a border color of : for any element. | <any> |
| .border-white | set a border color of : for any element. | <any> |
| .border-alpha-10 | set a border color of : for any element. | <any> |
| .border-alpha-15 | set a border color of : for any element. | <any> |
| .border-alpha-25 | set a border color of : for any element. | <any> |
| .border-alpha-50 | set a border color of : for any element. | <any> |
| .border-alpha-75 | set a border color of : for any element. | <any> |
| .border-facebook | set a border color of : for any element. | <any> |
| .border-twitter | set a border color of : for any element. | <any> |
| .border-youtube | set a border color of : for any element. | <any> |
| .border-linkedin | set a border color of : for any element. | <any> |
| .border-behance | set a border color of : for any element. | <any> |
| .border-dribbble | set a border color of : for any element. | <any> |
| .border-flicker | set a border color of : for any element. | <any> |
| .border-snapchat | set a border color of : for any element. | <any> |
| .border-instagram | set a border color of : for any element. | <any> |
| .border-whatsapp | set a border color of : for any element. | <any> |
| .border-pinterest | set a border color of : for any element. | <any> |