| Class | Properties |
|---|---|
.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-3 | border-width: 3px; |
.border-top-3 | border-top-width: 3px; |
.border-right-3 | border-right-width: 3px; |
.border-bottom-3 | border-bottom-width: 3px; |
.border-left-3 | border-left-width: 3px; |
.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-0 | border-width: 0; |
.border-top-0 | border-top-width: 0; |
.border-right-0 | border-right-width: 0; |
.border-bottom-0 | border-bottom-width: 0; |
.border-left-0 | border-left-width: 0; |
Usage
All sides
Use .border to apply a 1px solid border with the theme border color to all sides of an element.
Use .border-{width} to apply a border width size to all sides of an element.
<div class="border"></div>
<div class="border border-2"></div>
<div class="border border-3"></div>
<div class="border border-4"></div>Use .border-0 to remove the border from all sides of an element.
Individual sides
Use .border-{side} to apply a 1px solid border with the theme border color to a specific side of an element.
Use .border-{side}-{width} to apply a border width size to a specific side of an element.
<div class="border-top"></div>
<div class="border-right border-right-2"></div>
<div class="border-bottom border-bottom-3"></div>
<div class="border-left border-left-4"></div>Use .border-{side}-0 to remove the border from a specific side of an element.
Variants
By default, only responsive variants are generated for border width utilities.
Responsive
To control the background size for an element at a specific breakpoint, add a {screen}: prefix to any existing border width utility.
For example, use .md:border-4 to apply the border-4 utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:border-4, add "border-width" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"border-width",
);