Border

Borders use a composable architecture that separates positioning from styling. Structural classes define where the border appears, and combo classes modify width, style, and color independently. For border token values, see the Tokens page.

Structure

Structural classes define where the border appears. By default, borders use var(--border-s) width, solid style, and var(--border-primary) color.

<div class="border">All sides</div>
<div class="border-top">Top only</div>
<div class="border-bottom">Bottom only</div>
<div class="border-left">Left only</div>
<div class="border-right">Right only</div>

Width

Width classes modify the border thickness. The default is var(--border-s).

<div class="border border-m">Medium border on all sides</div>

Style

Style classes modify the border appearance. The default is solid.

<div class="border border-dashed">Dashed border</div>

Color

Color classes modify the border color using semantic tokens.

<div class="border border-faded">Subtle border</div>

Radius

Border radius tokens control corner rounding. Apply them directly via CSS — there are no utility classes for radius.

border-radius: var(--radius-m);

Composing Borders

Combine structural, width, style, and color classes to build any border you need. Each class modifies a single concern.

<div class="border-top border-m border-dashed border-secondary">
  Composed: top + medium + dashed + secondary
</div>