Border Utilities
Learn how to set a border to your elements with the border utilities to modify and design your elements easily with shorthand classes
Helpers List
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 |
|---|---|---|
|
Reset the Default Border of the element. | <any> |
|
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> |
|
set a border-width of 2px
|
<any> |
|
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
border-right with alpha color to divide between elements. |
<any> |
| Borders Radius | ||
|
set a border-radius of 4px |
<any> |
|
set a border-radius of 6px |
<any> |
|
set a border-radius of 8px |
<any> |
|
set a border-radius of 10px |
<any> |
|
set a border-radius of 15px |
<any> |
|
set a border-radius of 0 |
<any> |
|
set a border-radius of 50% |
<any> |
|
set a border-radius of var(--height) for our components full rounded pill shape |
<any> |
|
set the radius to top |
<.radius-*> |
|
set the radius to bottom |
<.radius-*> |
|
set the radius to page direction start |
<.radius-*> |
|
set the radius to page direction end |
<.radius-*> |
Border Colors
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.
Colors Customize
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> |