Stable

Shape

Five corners, each with a job: round to press, 4px labels, and boxes that get rounder as they get bigger.

Five corners, each with a job. Things you press are round; labels are nearly square; boxes get rounder as they get bigger. Corners come with the component: a screen rarely writes one.

The five corners

Label4pxroundedTags, badges, checkboxes, small hover areas

Field8pxrounded-lgText fields, icon squares, boxes inside a card

Tile12pxrounded-xlTiles, menus, popovers, hover cards, banners

Card16pxrounded-2xlBig cards, dialogs, the bottom sheet's top

PillRoundrounded-fullButtons, search, filter pills, toggles, avatars

By element

Element	Corner	Set by
Buttons and icon buttons	Round	Button, IconButton, ButtonGroup
Search, filter pills and chips, segmented controls, switches	Round	SearchInput, FilterPill, FilterChip, SegmentedControl, Switch
Avatars and status dots	Round	Avatar
Toasts	Round	Toast
Text fields	8px	Input, Textarea, TagInput, CopyField
Icon squares in card headers	8px	Card
Tiles and list items	12px	Card `md` and `sm`, StatBox
Menus, popovers, hover cards, banners	12px	ActionMenu, FilterPill's menu, HoverCard, PageBanner
Big cards and dialogs	16px	Card `lg`, Dialog, ConfirmDialog
The bottom sheet	16px on the top corners	BottomSheet
Drawers	Square: they meet the screen's edge	Drawer
Tags, badges, checkboxes	4px	Tag, Badge, Checkbox

Using corners

Round to press, square to read

Accepted

Do. A 4px tag says what something is; a round button is something to press. The shape tells them apart before the words do.

AcceptedMake intro

Don’t. A round tag and a square button. The label looks pressable and the button looks like a label.

Smaller inside than outside

Do. A box inside a 16px card takes 8px, so the two curves sit side by side.

Don’t. A rounder box inside a squarer one. The inner curve bulges against the outer.

Use only the five corners. No rounded-md (6px), rounded-[10px] or other values in between.
Pick by the element, not by taste. A bigger card earns a bigger corner, never a rounder one by eye.
A box inside a card is one step smaller than the card: 8px inside 16px, 4px or 8px inside 12px.
Where a part meets the screen's edge it has no corner: a drawer is square, the bottom sheet rounds only its top.
Never round one corner and not its neighbour, except where a part meets an edge (the bottom sheet's top, a button group's ends).

Rules

Labels are boxes, controls are pills

Tags and badges have 4px corners and never become pills. Pills (rounded-full) are for things you press: buttons, filter chips, search fields, segmented controls.