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) | |
| 100 | 2px | border-radius-100 | var(--border-radius-100) | |
| 200 | 4px | border-radius-200 | var(--border-radius-200) | |
| 300 | 8px | border-radius-300 | var(--border-radius-300) | |
| 400 | 12px | border-radius-400 | var(--border-radius-400) | |
| 500 | 16px | border-radius-500 | var(--border-radius-500) | |
| 600 | 32px | border-radius-600 | var(--border-radius-600) | |
| 700 | 64px | border-radius-700 | var(--border-radius-700) | |