Design systemRadius
Utilities for controlling the border radius of an element, as kds:rounded-* classes.
| Name | Preview | Value | Usage |
|---|---|---|---|
| 0 | 0px | No rounding, sharp, squared corners | |
| xs | 2px0.125rem | Subtle rounding for compact or dense elements | |
| sm | 4px0.25rem | Standard rounding | |
| md | 8px0.5rem | Moderate rounding for cards and containers | |
| lg | 12px0.75rem | Moderate rounding for cards and containers | |
| xl | 16px1rem | Moderate rounding for cards and containers | |
| 2xl | 24px1.5rem | Prominent rounding for dialogs and larger surfaces | |
| pill | Full | Fully rounded ends, used for tags, badges, and pill buttons |