Radius
How round each corner is, from pill buttons to softer panels.
Scale
rounded-controlpillrounded-field12pxrounded-panel16pxrounded-sheet24pxrounded-md10pxrounded-sm6px
| Class | Radius | Used by |
|---|---|---|
rounded-control | pill | Button, chip, badge, segmented |
rounded-field | 12px | Input, textarea, select |
rounded-panel | 16px | Card, popover, menu |
rounded-sheet | 24px | Dialog, sheet, media tile |
Tokens
6 tokens
--radius-sm- 6px
--radius-md- 10px
--radius-field- 12px
--radius-panel- 16px
--radius-sheet- 24px
--radius-control- 999px