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