Radius
Four values cover every rectangular surface in the system. Smaller elements get tighter radii; larger surfaces get softer ones. Pill-shaped components use rounded-full and ignore the scale entirely.
The scale
Four steps for rectangular surfaces. Pill-shaped components sit outside this scale and use rounded-full instead.
rounded-sm
4px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
| Token | Value | Tailwind | Usage |
|---|---|---|---|
| --radius-sm | 4px | rounded-sm | Unused by components — free for your own UI |
| --radius-md | 6px | rounded-md | Kbd, menu items, table cells |
| --radius-lg | 8px | rounded-lg | Buttons, inputs, tooltips, alerts |
| --radius-xl | 12px | rounded-xl | Cards, modals, popovers |
Component guidance
Which radius applies to which component family.
sm · 4px
- — not used by any component —
md · 6px
- Kbd
- Dropdown item
- Command item
- Table cell
lg · 8px
- Button
- Input
- Select
- Tooltip
- Alert
- Badge
xl · 12px
- Card
- Modal
- Popover
- Dropdown panel
full · pill
- Chip
- Checkbox
- Switch
- Avatar
- Progress
- Slider
Tokens
Override any of these to reshape every component.
app/globals.css
css
@theme {
--radius-sm: 4px; /* unused by components */
--radius-md: 6px; /* kbd, menu items, table cells */
--radius-lg: 8px; /* buttons, inputs, tooltips, alerts */
--radius-xl: 12px; /* cards, modals, popovers */
}Softer look
Prefer a friendlier radius language? Bump every value by ~50%: sm 6, md 10, lg 14, xl 18. Every component picks up the new curve automatically.
Also see
Related foundation topics.