Skip to content
UX Atlas
Plate FND·046 · UI foundationGrid D2 · Rev. 2026-08-14

Shape

Corner treatment and silhouette carry tone, and a product should commit to one system rather than mixing several.

UI foundationCraft conventionFoundational

Definition

Shape covers corner radius, aspect ratio and overall silhouette. In interfaces the dominant decision is the radius system, which reads as a consistent voice when it is disciplined and as carelessness when it is not.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What radius communicates
  3. 3Details that matter
  4. 4Keeping radius coherent
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Establishing a visual language.
  • Auditing a product for inconsistent corner treatment.
  • Defining the visual language of a system, where radius will appear on every component.

Common mistakes

  • Multiple radius systems with no documented rule.
  • Nested radii that are not offset.
  • A radius scale with too many values.

What radius communicates

RadiusCharacterCommon use
0Precise, technical, editorialDeveloper tools, data-dense products, editorial design.
2 to 4pxQuiet, functionalEnterprise software, dense forms.
6 to 12pxFriendly, modern, neutralThe current mainstream default for product UI.
16 to 24pxSoft, consumer, approachableMobile apps, consumer products, cards.
Fully roundedPlayful, tactilePills, tags, avatars, floating action buttons.

Details that matter

  • Nested radii should be offset: an inner radius roughly equal to the outer radius minus the padding keeps the curves concentric.
  • Very large radii on small elements produce a lozenge rather than a rounded rectangle. Check at the smallest size the component reaches.
  • Radius interacts with borders. A 1px border on a tight radius can look uneven at some device pixel ratios.
  • Keep the token set small: three or four values covers almost every product.

Keeping radius coherent

Do

  • Define a small set of radii and give each a job: controls, surfaces, panels, pills.
  • Compute nested radii, so an inner corner is the outer radius minus the padding.
  • Keep the same radius across states of one component.

Do not

  • Mix four radii on one screen without a rule behind them.
  • Use a full pill for a control that also appears square elsewhere.
  • Apply a large radius to a dense table row, which wastes the corners and the space.

In practice

  1. i.

    Concentric nested corners

    Cards with inner surfaces

    An inner element with the same radius as its container looks pinched. Subtracting the padding from the outer radius makes the curves parallel, which is the detail that separates careful systems from careless ones.

  2. ii.

    Concentric corners

    The nested radius rule

    An inner element with the same radius as its container reads as slightly wrong, because the curves are not concentric. Subtracting the padding from the outer radius is the arithmetic that makes nested corners look intentional.

Local chart

FND·046 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ButtonCMP·001 · APPLIED THROUGHCardCMP·022 · APPLIED THROUGHDesign TokensSYS·001 · RELATED CONCEPTBorders and DividersFND·047 · RELATED CONCEPTElevationFND·048 · RELATED CONCEPTRepetitionFND·010 · RELATED CONCEPTSimilarityFND·005 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

  • ButtonCMP·001 · Component
  • CardCMP·022 · Component

Related concept

Connected closely enough to change how you apply this.