Foundations
Border Radius
Corner rounding defines the visual character of UI elements.
Radius Scale
Token Value Preview
--radius-none 0px --radius-sm 4px --radius-base 8px --radius-lg 12px --radius-xl 16px --radius-2xl 24px --radius-full 9999px Usage by Component
| Component | Radius | Token |
|---|---|---|
| Button | 8px | radius-base |
| Input | 8px | radius-base |
| Card | 12px | radius-lg |
| Modal | 16px | radius-xl |
| Badge | 9999px | radius-full |
| Tag | 4px | radius-sm |
| Tooltip | 8px | radius-base |
Nested Elements
Inner elements use a smaller radius than their parent. Card (12px) → Button (8px) → Icon (4px).
CSS Variables
border-radius.css css
:root {
--radius-none: 0;
--radius-sm: 0.25rem; /* 4px */
--radius-base: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-2xl: 1.5rem; /* 24px */
--radius-full: 9999px;
}