Rounded corners

We use rectangles with rounded corners because they are easier on the eyes than a rectangle with sharp edges. Rounded corners not only take less cognitive effort to visually process, they also give our UI a more modern look-and-feel.

Usage

Do

Do use “Rounded Small” for most smaller components like chips, and
“Rounded Large” for larger components like modals. Predominantly, radii should get larger the larger the component.

Don’t

Don’t use sharp, squared corners, except on desktop slide out panels.

Nesting

Nested border radii look really funky if they're the same. To maintain the same curvature, the outer radius = inner radius + padding.

Radius tokens

Token name	Resolved value	Usage
radius.none	0px	Sharp corners, no rounding
radius.small	4px	Subtle rounding, tags, badges
radius.medium	8px	Small buttons, segmented controls
radius.large	12px	Default buttons, inputs, cards, modals
radius.xlarge	16px	Large panels, dialogs
radius.xxlarge	24px	Hero cards, feature blocks
radius.full	9999px	Pills, circular avatars