Shape

Corners tell people what a surface is: a soft rectangle holds content, and a circle stands for a person or a track. Larger surfaces take larger corners, and lines appear only where space cannot separate.

Radius scale

--radius-sm4 px
--radius-md6 px
--radius-lg8 px
--radius-xl12 px
--radius-2xl16 px
--radius-3xl24 px
--radius-full9999 px

Take corners from this scale. Small elements take the small steps and large surfaces the large ones, so a corner looks equally soft at any size.

Which corner goes where

Match the radius to the component, not to the screen it sits on. Controls that stand side by side at one height share a radius, so a field and its button line up.

Project name

Checkbox, inline code: 4 px; --radius-sm
Header navigation item, counter, controls under 36 px: 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: 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

Corners inside corners

When a rounded shape sits inside another, subtract the padding from the outer radius to get the inner one. The two curves then run parallel and the gap between them stays even.

A menu with 12 px corners and 4 px of padding gives its rows 8 px corners. If 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.

Full radius

A full radius makes a circle or a capsule, and that shape means something: a person, a radio, the track of a switch or a slider.

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, and tags scattered around an interface add noise.

Square corners

Leave a corner square where a surface meets the edge of the window. A sheet on a phone rounds its top corners and runs square into the bottom edge, and a bar across the full width has no rounded corners at all.

Joined controls round only their outer corners. The segments of a segmented control and the halves of a split button meet with straight edges, so no gap opens between them. Cells of a table stay square.

Lines

A line separates only where space cannot. A box of content has no border: its fill sets it apart.

A line that only separates visually is hidden from screen readers. A menu separator is announced, since it groups items for everyone.

On paper and in forced colors, where fills disappear, cards and gray boxes gain a 1 px edge so they keep their shape.

Table and list rule: 1 px; --border-rule
Menu group separator: 1 px, 4 px above and below; --border-rule
Edge between two panes: 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

Permitted and not permitted

Permitted

Radii from the scale, by component
Use the step listed for the component.
An inner radius equal to the outer radius minus the padding
Nested curves stay parallel.
A full radius on avatars, radios and switches
The shape stands for the thing.

Not permitted

A border around a card or a gray box
Its fill already separates it, and a line adds noise.
A free-standing word in a capsule
It reads as a tag.
A radius chosen by eye
Take the step named for the component. A shape inside another takes the outer radius less the padding.
Rounded corners against the window edge
A sliver of the page shows through at each corner.

NextElevation and materials

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

JSON

{
  "title": "Shape",
  "path": "/foundations/shape",
  "url": "https://design.werklist.com/foundations/shape",
  "text": "https://design.werklist.com/agent/foundations/shape",
  "summary": "The radius scale, which corner each component takes, and where a line may be drawn.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Shape",
  "purpose": "Sets the corner radius of each component from one scale and limits lines to the places where space cannot separate.",
  "anatomy": [
    {
      "part": "Checkbox, inline code, a filled shape nested in a larger one",
      "measure": "4 px",
      "token": "--radius-sm"
    },
    {
      "part": "Header navigation item, counter, controls under 36 px high",
      "measure": "6 px",
      "token": "--radius-md"
    },
    {
      "part": "Button, icon button, text field, select, menu row, tooltip",
      "measure": "8 px",
      "token": "--radius-lg"
    },
    {
      "part": "Menu, popover, well",
      "measure": "12 px",
      "token": "--radius-xl"
    },
    {
      "part": "Card, dialog, sheet (top corners only on a phone)",
      "measure": "16 px",
      "token": "--radius-2xl"
    },
    {
      "part": "Navigation rail",
      "measure": "24 px",
      "token": "--radius-3xl"
    },
    {
      "part": "Avatar, radio, switch, slider track, current row of a side navigation, quiet status",
      "measure": "full",
      "token": "--radius-full"
    },
    {
      "part": "Table rule, list rule, menu separator, pane edge",
      "measure": "1 px",
      "token": "--border-rule"
    },
    {
      "part": "Focus ring",
      "measure": "2 px, 2 px outside the element",
      "token": "--focus-ring-width"
    },
    {
      "part": "Glass ring in the dark theme",
      "measure": "0.5 px",
      "token": "--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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/shape