Border Radius
Corner rounding scale from none to full circle. Values in px and rem for consistent sizing.
Scale
Complete border-radius scale with token names, pixel and rem values.
| Name | px | rem | Preview |
|---|---|---|---|
| none | 0 | 0 | |
| sm | 2 | 0.125 | |
| default | 4 | 0.25 | |
| md | 6 | 0.375 | |
| lg | 8 | 0.5 | |
| xl | 12 | 0.75 | |
| 2xl | 16 | 1 | |
| 3xl | 24 | 1.5 | |
| full | 9999 | 9999px |
Visual Comparison
All radius values side by side.
none 0px
sm 2px / 0.125rem
default 4px / 0.25rem
md 6px / 0.375rem
lg 8px / 0.5rem
xl 12px / 0.75rem
2xl 16px / 1rem
3xl 24px / 1.5rem
full 9999px
Applied Examples
How border-radius tokens look on common UI elements.
Buttons
Cards
none
Sharp corners
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
Inputs
Avatars
AB
none CD
md EF
xl GH
full CSS Tokens
Use these CSS custom properties or Tailwind classes.
| Tailwind Class | CSS Value | rem |
|---|---|---|
| rounded-none | 0px | 0 |
| rounded-sm | 2px | 0.125rem |
| rounded | 4px | 0.25rem |
| rounded-md | 6px | 0.375rem |
| rounded-lg | 8px | 0.5rem |
| rounded-xl | 12px | 0.75rem |
| rounded-2xl | 16px | 1rem |
| rounded-3xl | 24px | 1.5rem |
| rounded-full | 9999px | -- |