Border Radius
| Border Radius | Value | Token | Usage |
|---|---|---|---|
| 50 | 0.25rem |
--border-radius-50 |
Small border radius for badges and other small visual components |
| 100 | 0.5rem |
--border-radius-100 |
Standard border radius |
| 200 | 1rem |
--border-radius-200 |
Large border radius |
| Legacy | 0.5rem |
--border-radius |
Legacy border radius, use 'border-radius-100' instead |
Usage Guidelines
Border radius tokens provide consistent rounded corners across the design system:
- 50: Use for small components like badges, tags, or small buttons where subtle rounding is needed
- 100: The standard border radius for most UI components including buttons, cards, and form inputs
- 200: Use for larger components or when you need more pronounced rounded corners
- Legacy: Deprecated token, migrate to
border-radius-100for new implementations
Examples
/* Small badge */
.badge {
border-radius: var(--border-radius-50);
}
/* Standard button */
.button {
border-radius: var(--border-radius-100);
}
/* Large card */
.card {
border-radius: var(--border-radius-200);
}