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