Radius
Corner radius
Scale derived from
--radius (0.5rem base). Tailwind utilities map to --radius-sm through --radius-4xl.| Preview | Step | Token | px | rem | Calc |
|---|---|---|---|---|---|
| sm | --radius-sm | 4px | 0.25rem | base − 4 | |
| md | --radius-md | 6px | 0.375rem | base − 2 | |
| control | --radius-control | 10px | 0.625rem | fixed | |
| lg | --radius-lg | 8px | 0.5rem | base | |
| xl | --radius-xl | 12px | 0.75rem | base + 4 | |
| 2xl | --radius-2xl | 14.4px | 0.9rem | base × 1.8 | |
| 3xl | --radius-3xl | 17.6px | 1.1rem | base × 2.2 | |
| 4xl | --radius-4xl | 20.8px | 1.3rem | base × 2.6 |
In context
rounded-sm
Chips, compact controls
rounded-lg
Cards, inputs, menus
rounded-2xl
Panels, phone shells