Sections

Border width

Utilities for controlling the border width of an element.

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.

.border

.border-2

.border-3

.border-4

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

.border-top

.border-right-2

.border-bottom-3

.border-left-4

<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",
);