Radius from one token

Set one --radius and derive every other radius from it.

From shadcn (Vercel plugin): keep radius consistent; 0.625rem is the baseline.

One token, or six numbers

Drag --radius or pick a preset.

Arbitrary valuesBad
Invite teammate Pro
Finance team F
Cancel Send invite
rounded-[3px] · rounded-md · rounded-2xl · rounded-full
Derived from --radiusGood
Invite teammate Pro
Finance team F
Cancel Send invite
xl · lg · md · sm · xs
:root {
  --radius: 0.625rem;
  --radius-xs: calc(var(--radius) * 0.5);   /* kbd    */
  --radius-sm: calc(var(--radius) * 0.75);  /* badge  */
  --radius-md: calc(var(--radius) * 0.875); /* input, button */
  --radius-lg: var(--radius);               /* card   */
  --radius-xl: calc(var(--radius) * 1.5);   /* dialog */
}

Subtract, or multiply

Start at 0.25rem, then drag up.

Subtract (CLI v3)Bad
calc(var(--radius) - 4px)
Multiply (CLI v4)Good
calc(var(--radius) * 0.75)
/* v3 */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-xl: calc(var(--radius) + 4px);

/* v4 */
--radius-sm: calc(var(--radius) * 0.75);
--radius-md: calc(var(--radius) * 0.875);
--radius-xl: calc(var(--radius) * 1.5);

Why it matters, pros and cons

Why it matters

Corner shape is one decision, not six; multiplied steps stay in proportion.

Pros

  • Re-theme corners by editing one value.
  • No zero corners on small radii.
  • Drift is greppable: rounded-[.

Cons

  • Pills and avatars are shapes: use rounded-full.
  • Large values make dialogs heavy; cap the range.
  • Migrating from v3 offsets shifts small radii slightly.