Border Radius
Chroma includes Border Radius tokens available to designers and developers to easily create the same UI in Figma and code.
| Example | Value | Figma Variable Name | CSS Variable Name | Utility class |
|---|---|---|---|---|
| 0 | 0 | border-radius-0 | var(--border-radius-0) | rounded-0 |
| 2px | 2px | border-radius-100 | var(--border-radius-100) | rounded-100 |
| 4px | 4px | border-radius-200 | var(--border-radius-200) | rounded-200 |
| 8px | 8px | border-radius-300 | var(--border-radius-300) | rounded-300 |
| 12px | 12px | border-radius-400 | var(--border-radius-400) | rounded-400 |
| 16px | 16px | border-radius-500 | var(--border-radius-500) | rounded-500 |
| 24px | 24px | border-radius-550 | var(--border-radius-550) | rounded-550 |
| 32px | 32px | border-radius-600 | var(--border-radius-600) | rounded-600 |
| 40px | 40px | border-radius-650 | var(--border-radius-650) | rounded-650 |
| 48px | 48px | border-radius-700 | var(--border-radius-700) | rounded-700 |
| 56px | 56px | border-radius-750 | var(--border-radius-750) | rounded-750 |
| 64px | 64px | border-radius-800 | var(--border-radius-800) | rounded-800 |
| 72px | 72px | border-radius-850 | var(--border-radius-850) | rounded-850 |
| 80px | 80px | border-radius-900 | var(--border-radius-900) | rounded-900 |
| 88px | 88px | border-radius-950 | var(--border-radius-950) | rounded-950 |
| 96px | 96px | border-radius-1000 | var(--border-radius-1000) | rounded-1000 |