Semantic Naming
Six corner radius values are commonly used.
| size | value | example |
| none | 0px | |
| small | 2px | |
| medium | 4px | |
| large | 8px | |
| xLarge | 16px | |
| round | 50% |
None
Use “none” for badges, and other non-iteractive elements on the page.
Small
Use “small” corner radius value for small cards and tiles.
Medium
Use “medium” corner radius value for most buttons, modals, and cards.
Large
Use “large” corner radius value for large cards and header displays.
Extra Large
Use “xLarge” corner radius for header displays and stand-alone page elements.
Round
Use “round” corner radius value for pills and circular buttons.
Note: The percentage-based 50% border radius cannot be used for rectangular elements. You should use the element's height instead.