Shape, With Intent
A corner sets personality. Sharp reads technical, fully round reads playful, and the considered middle reads premium. This system commits to one 6px signature on every control, a short ladder up to hero surfaces, and keeps the fully round pill as an accent, never a default.
The Radius Scale
Eight tokens, each with a role. The four middle steps do almost all the work in a real interface. Every box below renders with its real var(--radius-*) token, so what you see is what ships.
The Golden Rule
A fully round corner is a strong statement, and a statement repeated everywhere stops meaning anything. Reserve --radius-pill for small, single-line elements where the round shape is the point: chips, tags, avatars, toggles, status badges. Every button, input, and select takes the 6px signature. Beyond that, bigger surfaces earn bigger radii: a card is not shaped like a button, and a modal is not shaped like a card.
--radius-sm, the 6px signature. Calm, precise, unmistakably a control.The Law of Concentric Corners
Nest one rounded element inside another and the corners must stay concentric: parallel curves sharing a center, like a screen inside its housing. The inner radius equals the outer radius minus the padding between them.
Both cards below use --radius-xl (16px) outside with 8px of padding. On the left the inner surface is set to --radius-md (16 minus 8), so the corners run parallel. On the right it keeps the full 16px and the arcs collide. Apple ships this rule as a first-class API: ConcentricRectangle and containerShape in SwiftUI.
Continuous Corners, When the Browser Allows
A plain CSS corner is a quarter circle: the curvature jumps from zero to its maximum at a single point. Apple rounds corners as a squircle instead, where the curvature eases in and out, and the eye reads that gradual onset as softer at the same nominal radius. The CSS corner-shape property brings it to the web, with corner-shape: squircle defined as superellipse(2). We ship it as progressive enhancement inside an @supports query, so the base border-radius works everywhere and supporting browsers get the smoother curve for free.
The universal fallback. Plain border-radius, a quarter-circle corner. Renders identically in every browser.
Same nominal radius, upgraded with corner-shape: squircle where supported. If your browser lacks it, this shape falls back to the arc on the left, which is the point.
corner-shape is new, landing first in recent Chromium. That is exactly why it is an enhancement, not a requirement. Never gate layout, hit targets, or legibility on it. The base border-radius carries the design, and the squircle is a quiet reward for browsers that can render it.The Scale at Real Size
The same philosophy on real components. A chip stays a pill because it is small and one line. A button takes the 6px signature. A card steps up to 12px, and a modal to 16px. Each surface renders with its actual token, so the size-to-shape relationship is visible at a glance.
Token Reference
| Token | Value | Preview | Role |
|---|---|---|---|
--radius-none | 0 | Square. Tables, full-bleed media, section dividers. | |
--radius-xs | 4px | Nested inner corners, tight inline elements. | |
--radius-sm | 6px | Signature control radius. Buttons, inputs, selects. | |
--radius-md | 8px | Comfortable controls, small badges, compact containers. | |
--radius-lg | 12px | Cards, menus, popovers, dropdowns. | |
--radius-xl | 16px | Modals, sheets, large surfaces. | |
--radius-2xl | 20px | Hero panels, feature surfaces. | |
--radius-pill | 9999px | Accent only. Chips, tags, avatars, toggles, one-line status. Never wide buttons or cards. |
Sources
- Material 3, Shape scale. Shape as a role-based scale rather than one global radius. Our step values are tuned to this brand. m3.material.io/styles/shape
- Vercel Geist. Uses a
6pxcontrol radius on buttons and inputs, a concrete example of a moderate signature reading as premium. vercel.com/geist - Apple, SwiftUI.
RoundedRectangle(style: .continuous)draws the squircle, andConcentricRectanglewithcontainerShapeformalizes concentric nesting. Apple does not publish exact corner-radius values. SPA developer.apple.com/documentation/swiftui/roundedrectangle - CSS corner-shape. The CSS Borders draft defines
corner-shape, wheresquircleequalssuperellipse(2). Support is limited and landing first in recent Chromium, so we treat it as progressive enhancement. developer.mozilla.org/en-US/docs/Web/CSS/corner-shape - The token mapping, the pill-as-accent reading, and the 6px signature are house rules specific to this system. SPA