Primitives
Border radius
Corner-rounding tokens — from sharp (0px) to pill (999px) to fully circular.
Border radius tokens control corner rounding across components. The system supports modes from sharp (0px) to pill (999px), with circle reserved for fully circular elements (avatars, dots).
Radius scale (primitives)
0
0px50
2px100
4px200
8px300
10px400
12px500
14px600
16px700
20px800
24px900
28px1000
32px1100
36px1200
40px1300
44px1400
48px1500
999pxpill
999px1600
9999pxcircle
9999pxSemantic radius tokens
| Token | CSS Variable | Description |
|---|---|---|
| None | --border-radius-none | No rounding (0px) |
| Small | --border-radius-sm | Subtle rounding |
| Medium | --border-radius-md | Default component radius |
| Large | --border-radius-lg | Prominent rounding |
| Pill | --border-radius-pill | Maximum rounding (999px) |
Radius modes
Figma uses border-radius modes to drive the overall shape feel of a theme.
| Mode | Effect | Use case |
|---|---|---|
| Sharp | All radii near 0 | Corporate, minimal |
| Soft | Moderate radii | Default, balanced |
| Round | Generous radii | Friendly, modern |
| Pill | Maximum radii (999px) | Buttons, tags |
Related
- Border width — pairs with radius for component framing
- Shadow — elevation that complements radius choices