Border Width

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.

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Basic Example

Individual Sides

Horizontal and Vertical Sides

Best Practices

​Overview

​Basic Example

​Individual Sides

​Horizontal and Vertical Sides

​Best Practices

Overview

Basic Example

Individual Sides

Horizontal and Vertical Sides

Best Practices