Border Radius

A consistent border radius scale using CSS variables. Available as Tailwind classes with the rounded-* prefix.

8 radius tokens from extra small (4px) to fully rounded. Use the token classes for consistency.

Extra Small(4px)

rounded-xs

Small(8px)

rounded-sm

Medium(12px)

rounded-md

Large(16px)

rounded-lg

Extra Large(20px)

rounded-xl

2XL(24px)

rounded-2xl

3XL(32px)

rounded-3xl

Full(9999px)

rounded-full

Extra Small Elements

radius-xs (4px) — Badges, chips, tags

Small Elements

radius-sm (8px) — Buttons, small cards

Medium Elements

radius-md (12px) — Cards, inputs, containers

Large Elements

radius-lg (16px) — Modals, larger cards

radius-xl (20px) — Hero cards, feature sections

Special

radius-full (9999px) — Pills, avatars, circular buttons

Button

Card

Avatar

Pill

Use token classes

rounded-sm, rounded-md, rounded-lg

Standard Tailwind is also acceptable

rounded-lg, rounded-xl, rounded-full

(Values match our tokens)

Don't use arbitrary values

rounded-[12px]