Border Radius

Class reference

Class	Properties
`radius-none`	`border-radius: var(--radius-none); /* 0 */`
`radius-xs`	`border-radius: var(--radius-xs); /* step-1 × multiplier */`
`radius-sm`	`border-radius: var(--radius-sm); /* step-1.5 × multiplier */`
`radius-md`	`border-radius: var(--radius-md); /* step-2 × multiplier */`
`radius-lg`	`border-radius: var(--radius-lg); /* step-4 × multiplier */`
`radius-xl`	`border-radius: var(--radius-xl); /* step-7 × multiplier */`
`radius-full`	`border-radius: var(--radius-full); /* 9999rem, capsule */`

Examples

<div class="radius-md p-md" style="background: var(--card)">A card with medium radius.</div>

<button
  class="radius-full px-lg py-sm"
  style="background: var(--primary); color: var(--primary-foreground)"
>
  Pill button
</button>

Visual

At default --spacing-interval: 0.25rem and --radius-multiplier: 1:

none · 0

xs · 4px

sm · 6px

md · 8px

lg · 16px

xl · 28px

full

Tokens

:root {
  /* modifier */
  --radius-multiplier: 1;

  /* semantic */
  --radius-none: 0rem;
  --radius-xs: calc(var(--step-1) * var(--radius-multiplier));
  --radius-sm: calc(var(--step-1_5) * var(--radius-multiplier));
  --radius-md: calc(var(--step-2) * var(--radius-multiplier));
  --radius-lg: calc(var(--step-4) * var(--radius-multiplier));
  --radius-xl: calc(var(--step-7) * var(--radius-multiplier));
  --radius-full: 9999rem;

  /* primitive aliases */
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);
  --radius-card: var(--radius-lg);
}

Customizing

Adjust --radius-multiplier to sharpen or round every radius globally:

.architectural {
  --radius-multiplier: 0;
} /* sharp */
.friendly {
  --radius-multiplier: 1.5;
} /* rounder */

Retune individual primitives independently:

:root {
  --radius-button: var(--radius-full); /* every button capsule */
}

See Foundations → Radius for the nested-radius math and the primitive layer's design rationale.