Borders

Border color, edge selection, border style, and composable border-radius utilities.

Border utilities handle border lines, styles, and per-corner border radius.

Borders

Edges

Class	Result
`border`	1px solid on all sides
`border-t`, `border-r`, `border-b`, `border-l`	1px solid on that edge
`border-none`	Removes all borders
`border-t-none`, `border-r-none`, `border-b-none`, `border-l-none`	Removes that edge

Color

Color classes update --_border-color (default: --border):

Class	Role
`border-primary`, `border-secondary`, `border-tertiary`	Brand roles
`border-muted`, `border-faded`	Dim / fade
`border-info`, `border-success`, `border-warning`, `border-destructive`	Status roles

Style

Class	Declaration
`border-dashed`	`border-style: dashed`
`border-dotted`	`border-style: dotted`
`border-double`	`border-style: double`

<div class="border border-dashed border-muted rounded-md p-md">Dashed, muted border.</div>

Border radius

Uses the radius scale (--radius-xs to --radius-full, scaled by --radius-multiplier):

All corners

Class	Value
`rounded-0`	`0`
`rounded-xs`	`var(--radius-xs)`
`rounded-sm`	`var(--radius-sm)`
`rounded-md`	`var(--radius-md)`
`rounded-lg`	`var(--radius-lg)`
`rounded-xl`	`var(--radius-xl)`
`rounded-full`	`var(--radius-full)`

Edges and corners

Scope	Classes
Top / bottom edge	`rounded-t-`, `rounded-b-`
Left / right edge	`rounded-l-`, `rounded-r-`
Single corner	`rounded-tl-`, `rounded-tr-`, `rounded-br-`, `rounded-bl-`

Composition variables

Radius utilities set four @property-registered variables with inherits: false:

@property --_radius-top-left {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

:where(.rounded-b-0) {
  --_radius-bottom-left: 0px;
  --_radius-bottom-right: 0px;
}

<!-- keep top corners rounded, flatten bottom edge -->
<div class="rounded-lg rounded-b-0">...</div>

Variable	Syntax	Initial	Managed by
`--_radius-top-left`	`<length-percentage>`	`0`	`rounded-`, `rounded-t-`, `rounded-l-`, `rounded-tl-`
`--_radius-top-right`	`<length-percentage>`	`0`	`rounded-`, `rounded-t-`, `rounded-r-`, `rounded-tr-`
`--_radius-bottom-right`	`<length-percentage>`	`0`	`rounded-`, `rounded-b-`, `rounded-r-`, `rounded-br-`
`--_radius-bottom-left`	`<length-percentage>`	`0`	`rounded-`, `rounded-b-`, `rounded-l-`, `rounded-bl-`

Borders

On this page