Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Shape

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

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 page
  1. Definition
  2. What radius communicates
  3. Details that matter
  4. In practice
  5. Continue from here

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.

In practice

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.

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.

Related concept

Connected closely enough to change how you apply this.