Border Utilities
# Color
The border color utility controls the border color of an element and contains classes for each color variable along with primary, success, warning, danger, dark, and light. This utility also includes classes for focus and hover states. See colors.
| Class | State | Properties |
|---|---|---|
| --border-blue | border-color: @color[blue]; | |
| --border-primary | border-color: @color[blue]; | |
| --focus-border-primary | :focus | border-color: @color[blue]; |
| --hover-border-primary | :hover | border-color: @color[blue]; |
# Radius
The border radius utility controls the border radius of an element.
| Class | Properties |
|---|---|
| --squared | border-radius: 0; |
| --rounded-0 | border-radius: 0; |
| --rounded-top-0 | border-top-left-radius: 0; border-top-right-radius: 0; |
| --rounded-right-0 | border-top-right-radius: 0; border-bottom-right-radius: 0; |
| --rounded-bottom-0 | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
| --rounded-left-0 | border-top-left-radius: 0; border-bottom-left-radius: 0; |
| --rounded-top-left-0 | border-top-left-radius: 0; |
| --rounded-top-right-0 | border-top-right-radius: 0; |
| --rounded-bottom-right-0 | border-bottom-right-radius: 0; |
| --rounded-bottom-left-0 | border-bottom-left-radius: 0; |
| --rounded | border-radius: .25rem; |
| --rounded-top | border-top-left-radius: .25rem; border-top-right-radius: .25rem; |
| --rounded-right | border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; |
| --rounded-bottom | border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem; |
| --rounded-left | border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; |
| --rounded-top-left | border-top-left-radius: .25rem; |
| --rounded-top-right | border-top-right-radius: .25rem; |
| --rounded-bottom-right | border-bottom-right-radius: .25rem; |
| --rounded-bottom-left | border-bottom-left-radius: .25rem; |
| --rounded-sm | border-radius: .125rem; |
| --rounded-top-sm | border-top-left-radius: .125rem; border-top-right-radius: .125rem; |
| --rounded-right-sm | border-top-right-radius: .125rem; border-bottom-right-radius: .125rem; |
| --rounded-bottom-sm | border-bottom-right-radius: .125rem; border-bottom-left-radius: .125rem; |
| --rounded-left-sm | border-top-left-radius: .125rem; border-bottom-left-radius: .125rem; |
| --rounded-top-left-sm | border-top-left-radius: .125rem; |
| --rounded-top-right-sm | border-top-right-radius: .125rem; |
| --rounded-bottom-right-sm | border-bottom-right-radius: .125rem; |
| --rounded-bottom-left-sm | border-bottom-left-radius: .125rem; |
| --rounded-lg | border-radius: .5rem; |
| --rounded-top-lg | border-top-left-radius: .5rem; border-top-right-radius: .5rem; |
| --rounded-right-lg | border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; |
| --rounded-bottom-lg | border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem; |
| --rounded-left-lg | border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; |
| --rounded-top-left-lg | border-top-left-radius: .5rem; |
| --rounded-top-right-lg | border-top-right-radius: .5rem; |
| --rounded-bottom-right-lg | border-bottom-right-radius: .5rem; |
| --rounded-bottom-left-lg | border-bottom-left-radius: .5rem; |
| --rounded-full | border-radius: 9999px; |
| --rounded-top-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; |
| --rounded-right-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; |
| --rounded-bottom-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; |
| --rounded-left-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; |
| --rounded-top-left-full | border-top-left-radius: 9999px; |
| --rounded-top-right-full | border-top-right-radius: 9999px; |
| --rounded-bottom-right-full | border-bottom-right-radius: 9999px; |
| --rounded-bottom-left-full | border-bottom-left-radius: 9999px; |
# Style
The border style utility controls the style of an element's border.
| Class | Properties |
|---|---|
| --border-solid | border-style: solid; |
| --border-dashed | border-style: dashed; |
| --border-dotted | border-style: dotted; |
| --border-double | border-style: double; |
# Width
The border width utility controls the width of an element's border.
| Class | Properties |
|---|---|
| --border-0 | border-width: 0px; |
| --border-top-0 | border-top-width: 0px; |
| --border-right-0 | border-right-width: 0px; |
| --border-bottom-0 | border-bottom-width: 0px; |
| --border-left-0 | border-left-width: 0px; |
| --border | border-width: 1px; |
| --border-top | border-top-width: 1px; |
| --border-right | border-right-width: 1px; |
| --border-bottom | border-bottom-width: 1px; |
| --border-left | border-left-width: 1px; |
| --border-2 | border-width: 2px; |
| --border-top-2 | border-top-width: 2px; |
| --border-right-2 | border-right-width: 2px; |
| --border-bottom-2 | border-bottom-width: 2px; |
| --border-left-2 | border-left-width: 2px; |
| --border-4 | border-width: 4px; |
| --border-top-4 | border-top-width: 4px; |
| --border-right-4 | border-right-width: 4px; |
| --border-bottom-4 | border-bottom-width: 4px; |
| --border-left-4 | border-left-width: 4px; |
| --border-6 | border-width: 6px; |
| --border-top-6 | border-top-width: 6px; |
| --border-right-6 | border-right-width: 6px; |
| --border-bottom-6 | border-bottom-width: 6px; |
| --border-left-6 | border-left-width: 6px; |
| --border-8 | border-width: 8px; |
| --border-top-8 | border-top-width: 8px; |
| --border-right-8 | border-right-width: 8px; |
| --border-bottom-8 | border-bottom-width: 8px; |
| --border-left-8 | border-left-width: 8px; |