Border Radius Tokens — Consistent Corner Rounding Across Components
Create a border radius token scale for consistent corner rounding across buttons, cards, inputs, and modals. Learn pill, rounded, and sharp design approaches.
Detailed Explanation
Border Radius Token Design
Border radius tokens define the "roundness" of your UI. A consistent radius scale prevents the visual noise that comes from mixing arbitrary corner values.
Simple Scale
:root {
--borders-radius-none: 0;
--borders-radius-sm: 0.125rem; /* 2px */
--borders-radius-md: 0.375rem; /* 6px */
--borders-radius-lg: 0.5rem; /* 8px */
--borders-radius-xl: 0.75rem; /* 12px */
--borders-radius-2xl: 1rem; /* 16px */
--borders-radius-full: 9999px; /* pill shape */
}
Component-Level Tokens
Map the scale to specific components for clarity:
:root {
--borders-radius-button: var(--borders-radius-md);
--borders-radius-card: var(--borders-radius-lg);
--borders-radius-input: var(--borders-radius-md);
--borders-radius-modal: var(--borders-radius-xl);
--borders-radius-badge: var(--borders-radius-full);
--borders-radius-avatar: var(--borders-radius-full);
}
Design Approaches
Different design languages favor different radius philosophies:
| Style | Values | Example |
|---|---|---|
| Sharp | 0-4px | Enterprise software, data tables |
| Rounded | 6-12px | Modern SaaS, consumer apps |
| Pill | 9999px | Playful, mobile-first interfaces |
Border Width Tokens
Don't forget border widths:
:root {
--borders-width-none: 0;
--borders-width-thin: 1px;
--borders-width-medium: 2px;
--borders-width-thick: 4px;
}
Combining with Other Tokens
Border tokens work best when composed with color and spacing tokens. A card component might use --borders-radius-lg for corners, --borders-width-thin for the border, --colors-border for the color, and --spacing-md for internal padding.
Use Case
Use border radius tokens when establishing visual consistency across a component library, especially when transitioning from an older design where each component had independently chosen corner values.