# Shape

Sets the corner radius of each component from one scale and limits lines to the places where space cannot separate.

* Kind: foundation
* Page: https://design.werklist.com/foundations/shape
* Version: 2.1.2

## Rules

* Take the radius from --radius-sm to --radius-full, by component. No radius chosen by eye.
* Small elements take the small steps and large surfaces the large ones.
* Controls side by side at one height share one radius.
* Nested radius: inner equals outer minus padding. A menu at 12 px with 4 px of padding gives its rows 8 px.
* When the result drops below 4 px, a filled inner shape keeps 4 px.
* An image that runs to the edge of a card shares the card's corners there and stays square where it meets the text.
* Square corners where a surface meets the window edge, where parts of one control join, and on table cells.
* A full radius makes a circle or a capsule for a person, a radio, or a switch or slider track.
* A capsule holds text only as a quiet status or as the current row of a side navigation. A free-standing word in a capsule reads as a tag.
* A 1 px --border-rule line only for table and list rules, menu group separators and the edge between two panes.
* No border around a card or a gray box. Its fill already separates it.
* On paper, cards and gray boxes gain a 1 px edge in --border-rule.

## Anatomy

* Checkbox, inline code, a filled shape nested in a larger one: 4 px (--radius-sm)
* Header navigation item, counter, controls under 36 px high: 6 px (--radius-md)
* Button, icon button, text field, select, menu row, tooltip: 8 px (--radius-lg)
* Menu, popover, well: 12 px (--radius-xl)
* Card, dialog, sheet (top corners only on a phone): 16 px (--radius-2xl)
* Navigation rail: 24 px (--radius-3xl)
* Avatar, radio, switch, slider track, current row of a side navigation, quiet status: full (--radius-full)
* Table rule, list rule, menu separator, pane edge: 1 px (--border-rule)
* Focus ring: 2 px, 2 px outside the element (--focus-ring-width)
* Glass ring in the dark theme: 0.5 px (--glass-ring-raised)

## Accessibility

* A line that only separates visually is hidden from screen readers. A menu separator is announced, since it groups items for everyone.
* In forced colors, where fills disappear, cards and gray boxes gain a 1 px edge so they keep their shape.

## Tokens

* --radius-sm
* --radius-md
* --radius-lg
* --radius-xl
* --radius-2xl
* --radius-3xl
* --radius-full
* --border-rule
* --focus-ring
* --focus-ring-width
* --focus-ring-offset
* --glass-ring
* --glass-ring-raised