skip to content

In a design system, how should a corner radius scale be defined, and what rule keeps nested rounded corners looking concentric?

level: middleimportance: should knowfreq 34%

answer

  1. few steps, from sharp to pill
  2. radius reads relative to size
  3. roles such as control and container
  4. inner equals outer minus inset
  5. round only the free corners

basics

~20 s

Define a few radius steps, from none to fully rounded, mapped to roles such as control and container so small parts get small radii. When one rounded surface sits inside another, give the inner radius the outer radius minus the inset, floored at zero.

solid answer

~50 s

A **radius scale** is a short list of steps, for example none, small, medium, large and full, and components map to them by **role**: small controls such as chips and text fields take small radii, containers such as cards and sheets larger ones, and "full" makes pills and circles. Radius reads relative to size, so the same value that softens a card turns a small chip into a pill. Mapping roles rather than raw values lets a brand change its shape character in one place. For **nested** shapes, concentric corners need **inner radius = outer radius − inset** (never below zero): a 16-unit card holding an image inset by 8 units gives the image an 8-unit radius. Equal radii make the gap look thicker at the corners. Surfaces anchored to an edge, such as a bottom sheet, round only their free corners.

code

pseudocode · 8 lines
pseudocode
innerRadius(outerRadius, inset):
    r = outerRadius - inset
    if r < 0:
        return 0          // inset larger than the outer curve: inner corner is square
    return snapToNearestScaleStep(r)

// inventory tile: outer 16, thumbnail inset 8  -> 8
// inventory tile: outer 16, thumbnail inset 20 -> 0

go deeper

for a junior

Recall the named radius steps and which roles use them, and that nested corners use the outer radius minus the inset.

for a middle

Explain why radius reads relative to size, why roles beat raw values, and why equal nested radii make the gap look thicker at corners.

for a senior

Show how you would audit a library with a dozen ad-hoc radii, collapse them onto a scale, and handle nested and edge-anchored shapes.

for a principal

Weigh how much shape variation brands may take through role remapping, and where a fixed shape protects recognisability across products.

## What a radius scale is **Corner radius** is how much a surface's corners are rounded. A design system does not let each component choose a value; it defines a **radius scale**, a short list of named steps. A typical scale: | Step | Typical use | |---|---| | none | full-bleed images, surfaces flush with screen edges | | small | chips, text fields, small buttons, tags | | medium | cards, list tiles, menus | | large | sheets, dialogs, large panels | | full | pills, avatars, circular icon buttons | The values themselves are common practice rather than a standard: many systems land on a handful of steps with each roughly double the previous one, plus a "full" value large enough to make any height fully round. ## Why map by role and size Radius is perceived **relative to the size** of the shape. A radius that gently softens a large card makes a small chip look like a pill, and a radius that suits a chip makes a dialog look nearly square. So the scale is applied by **role**: - **Controls** (text fields, chips, small buttons) take small steps. - **Containers** (cards, menus) take medium steps. - **Large surfaces** (sheets, dialogs) take large steps. - **Full** is reserved for shapes meant to read as pills or circles. Mapping components to roles such as `shape.control` and `shape.container`, rather than to raw numbers, lets a brand change its whole **shape character** in one place. A multiplayer game's companion app might choose sharper, angular corners to echo the game's art style; a sister brand in the same system might remap the same roles to softer values. Shape is part of brand expression: sharper reads as precise and technical, rounder as friendly and approachable. ## The nested-radius rule When one rounded surface sits inside another, for example an item thumbnail inside an inventory tile, the corners only look **concentric** if the inner radius is the outer radius minus the distance between them: 1. Take the outer radius, say 16 units. 2. Take the inset between the outer edge and the inner shape, say 8 units. 3. Inner radius = 16 − 8 = 8 units. 4. If the inset is larger than the outer radius, the inner radius becomes zero; a negative radius does not exist. Why it works: the inner curve is then centred on the same point as the outer curve, so the gap between them stays even all the way round the corner. If both shapes use the same 16-unit radius, the inner corner curves more tightly than it should and the gap looks visibly **thicker at the corners** than along the sides. If the inner radius is larger than the outer, the gap pinches at the corners. The rule is a geometric guideline for tightly nested shapes; with a large inset the relationship is no longer noticeable, and designers may reasonably pick the scale step nearest the computed value. ## Partial rounding Not every corner should be rounded: - A **bottom sheet** anchored to the bottom edge rounds only its top corners. - A **side panel** rounds only the corners away from the edge it attaches to. - In a **segmented group** of adjacent buttons, only the outer corners of the first and last items are rounded, so the group reads as one shape. - An image **flush** against a card's edge takes the card's radius on the shared corners and none on the inner ones. ## The full step The **full** step is meant to make a shape a pill or a circle whatever its height. It is therefore defined as "fully round" rather than as a number tuned to one component: in practice a value larger than half of any component's height, or a proportion of the shorter side on platforms that express rounding that way. A spec that says "full" survives a taller button or a larger avatar; a spec that says "20" stops being a pill the moment the component grows. ## Pitfalls - **Too many steps.** Nine radii that differ by one unit cannot be told apart and invite arbitrary picks. - **One radius everywhere.** A single value looks right on one size and wrong on the others. - **Ignoring nesting.** Equal inner and outer radii on tight insets produce the uneven, thick-cornered gap. - **Rounding clipped content inconsistently.** A card with rounded corners whose image corners stay square pokes out at the corners.

  • Why should the computed inner radius be snapped to the scale rather than used exactly?
    The scale keeps shapes consistent and reviewable. A computed value such as 7 or 9 units would create one-off radii that cannot be tuned centrally. Snapping to the nearest step keeps the corners visually concentric within a unit or two, which the eye cannot distinguish, while every radius in the product still comes from the scale.
  • How does radius help express a brand in a multi-brand design system?
    Shape carries character: sharp corners read as precise or technical, round ones as friendly. If components reference shape roles such as control and container instead of raw values, each brand can remap those roles to its own steps, so the same component library looks angular in one product and soft in another without any component changing.

saying these in an interview costs you the question

  • Nested shapes should use the same radius as their container.
  • One radius value for every component keeps the system simplest and best.
  • Radius should scale in exact proportion to a component's width.
  • Every corner of every surface should be rounded, including edge-anchored sheets.
  • Corner radius is pure decoration with no brand or hierarchy meaning.