Border Width

The bundled border-width scale from border-0 through border-20.

Overview

Use border-width utilities to control how subtle or emphatic a border feels.

Bundled widths use CSS variables such as var(--border-1) so the scale stays tokenized; for context on variables in this stack, see Variables.

Class	Value	CSS	Usage
.border-0	0	border-width: 0;	No border
.border-1	1px → 1.25px	var(--border-1)	Subtle separation
.border-2	2px → 2.5px	var(--border-2)	Standard border
.border-4	4px → 5px	var(--border-4)	Accent framing
.border-8	8px → 10px	var(--border-8)	Strong decorative border
.border-10	10px → 12.5px	var(--border-10)	Heavy framing
.border-15	15px → 18.75px	var(--border-15)	Display framing
.border-20	20px → 25px	var(--border-20)	Maximum emphasis

Pattern	Covers	Typical suffixes
.border-{size}	All four sides	0, 1, 2, 4, 8, 10, 15, 20
.border-t-{size}, .border-r-{size}, .border-b-{size}, .border-l-{size}	One side only	1, 2, 4, 8
.border-x-{size}, .border-y-{size}	Horizontal or vertical pair	1, 2, 4, 8

Basic Example

Use border-{size} to set the same width on all four sides.

<div class="border-1 border-solid border-primary"></div>
<div class="border-2 border-solid border-primary"></div>
<div class="border-4 border-solid border-primary"></div>
<div class="border-8 border-solid border-primary"></div>

Individual Sides

Use border-t-*, border-r-*, border-b-*, and border-l-* when only one edge needs emphasis.

<div class="border-t-4 border-solid border-primary"></div>
<div class="border-r-4 border-solid border-primary"></div>
<div class="border-b-4 border-solid border-primary"></div>
<div class="border-l-4 border-solid border-primary"></div>

Horizontal and Vertical Sides

Use border-x-* and border-y-* to apply the same width to a pair of edges.

<div class="border-x-4 border-solid border-primary"></div>
<div class="border-y-4 border-solid border-primary"></div>

Best Practices

• Use border-1 and border-2 for most UI surfaces.
• Use side-specific widths for tabs, dividers, and timeline markers where only one edge should stand out.
• Use border-x-* and border-y-* for split layouts and framed media without over-specifying each side.
• Use border-4 and above sparingly for accents, highlights, and decorative frames.
• Pair width utilities with explicit style and color helpers such as .border-solid and .border-gray.
• Keep border widths consistent across similar components.