Radius

One scale of corner tokens. The name is the value: radius-8 is 8px. Controls take 8, rows and cards 12, floating panels 16, and dialogs 20.

Guide

Tokens

Save draft

<tk-button>Save draft</tk-button>
<tk-button shape="round">Follow</tk-button>

Picking a radius

The corner grows with the element: small parts have small corners, containers have large ones.

Element	Token
Buttons, inputs, selects, tabs, and other controls	`radius-8`
Rows inside a panel, cards, tables, code blocks	`radius-12`
Floating panels: popovers, menus, toasts	`radius-16`
Dialogs and sheets	`radius-20`
Small parts: a checkbox, a key, a skeleton line	`radius-4`
Pills and circles: badges, tags, round buttons, circle avatars	`radius-full`
Square corners	`radius-0`

All values and variables are in the token table.

Nested corners

When a rounded element sits inside another, keep the corners parallel: inner radius = outer radius − padding. If the result is 0 or less, use a square corner.

16 − 8 = 8

<div style="padding: var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-16)">
  <tk-button full-width>16 − 8 = 8</tk-button>
</div>

A panel at radius-16 with space-4 padding has rows at radius-12.
A segmented control at radius-8 with space-2 padding has segments at radius-6.

Floating panels

Anything that floats above the page with a shadow has a radius-16 corner: popovers, menus, listboxes, date picker popups, the floating sidebar, toasts. Rows inside a panel stay at radius-12.

Short boxes are the exception. A corner can't be larger than half the box's height, so radius-16 needs a box at least 32px tall. A shorter box, such as a tooltip, uses radius-8; at 16 it would turn into a pill. Check the height before you give a box radius-16.

Focus rings

A focus ring sits 2px outside its control, so its corner is the control's corner plus 2: a radius-8 button has a radius-10 ring. The browser draws this for you when you use outline. That is why the scale has radius-10, radius-14, and radius-18. See Focus.

Accessibility

Keep shape meaningful. A checkbox is a rounded square and a radio button is a circle. Don't make checkboxes round, even when the rest of the design is.
Corner shape doesn't change contrast, but very large corners on small elements can hide their edges.

Do / Don't

✅ Do	❌ Don't
Take corners from the `radius-*` scale	Use values like 5px or 9px
Use `radius-8` for controls	Round each control its own way
Give containers a larger corner than their controls	Give a card the same corner as its buttons
Compute nested corners as outer − padding	Put a round button in a square card
Use `radius-16` for every floating panel taller than 32px	Use `radius-16` on a 24px tooltip
Use `radius-full` for pills and circles	Make a checkbox round

Spacing: the padding in the nested-corner formula.
Focus: the ring around a control.
Elevation: the shadow that marks a floating panel.

Eleven steps on a 2px grid, from 0 to 20px, plus full for pills.

Scale

Token	Variable	px	Typical use
`radius-0`	`--radius-0`	0	square corners
`radius-2`	`--radius-2`	2	tiny parts: a flag, the box behind a link's focus ring
`radius-4`	`--radius-4`	4	small parts: a checkbox, a key, a skeleton line; the ring of a `radius-2` part
`radius-6`	`--radius-6`	6	a segment inside a segmented control; the ring of a checkbox
`radius-8`	`--radius-8`	8	controls: buttons, inputs, selects, tabs; tooltips
`radius-10`	`--radius-10`	10	the ring of a `radius-8` control
`radius-12`	`--radius-12`	12	rows in a panel, cards, tables, code blocks
`radius-14`	`--radius-14`	14	the ring of a `radius-12` control, such as a selection card
`radius-16`	`--radius-16`	16	floating panels: popovers, menus, toasts
`radius-18`	`--radius-18`	18	the ring of a `radius-16` control
`radius-20`	`--radius-20`	20	dialogs and sheets
`radius-full`	`--radius-full`	9999	pills and circles: badges, tags, round buttons

radius-full is a large fixed value, so it makes a pill at any height. A ring is the focus ring around a control; the browser draws its corner for you.