Foundations
Radii
The corner radius scale from the Figma radii page.
Explicit values from the Figma radii page. tokens.css overrides the
calc()-derived scale in theme.css, which diverges at 3xl/4xl.
Buttons are pills (--button-radius: var(--radius-full)) and cards use
3xl — see the component tokens on the
Foundations overview.
radius-none0px
radius-xs0.125rem
radius-sm0.25rem
radius-md0.375rem
radius-lg0.5rem
radius-xl0.75rem
radius-2xl1rem
radius-3xl1.5rem
radius-4xl2rem
radius-full9999px
Playground
Pick a token and a shape to see the radius applied to the same box —
radius-full clamps, so a rectangle becomes a pill and a square becomes a
circle.
rounded-lgShape
Radius