Border radius in UI design: assigning corners by role and nesting them correctly
Good border radius in UI design is a system, not a single number. Controls, containers and images each get a radius chosen for their role, nested shapes subtract their padding so curves stay parallel, and the whole set matches the brand's character, from sharp and architectural to soft and friendly.
Why one radius on everything looks wrong
Many templates set a single value, often 8px or 12px, and apply it to buttons, inputs, cards, images, modals and badges alike. The result looks generic and slightly off, because the same radius reads differently at different sizes. On a 40px button, 12px is a strong curve. On a 600px card, it's barely noticeable. On a small badge, it can turn the badge into a pill. Shape stops carrying meaning.
Rounded corners on screens became fashionable with operating system interfaces that rounded windows, buttons and icons, and with CSS's border-radius, which made them trivial to add. Being trivial to add is exactly why they're overused.
Assigning radius by role
| Role | What it covers | Typical choice |
|---|---|---|
| Controls | Buttons, inputs, selects, toggles, tags | Fully rounded (pill) for friendly brands, a small radius such as 4px to 8px for technical ones, or square |
| Containers | Cards, panels, modals, form panels | Larger than controls in absolute terms if rounded at all, such as 12px to 28px, or square |
| Images | Photos, thumbnails, avatars | Usually match containers; avatars are often circles |
| Small inline elements | Badges, chips, code spans | Cap the radius so it doesn't become a pill unless intended |
Pick two or three values and use them consistently. The decision that matters most is the character: square corners look precise, architectural and serious; pills look soft and approachable; a small radius sits in the middle and is the safest default for interfaces with lots of controls. Brutalist and Swiss styles usually go fully square; playful brands go round.
Nesting radii without the pinch
When a rounded element sits inside another, such as an image inside a card or a button inside a panel, using the same radius for both makes the gap between the curves uneven: thin at the corner, wider along the sides. The fix is simple: the inner radius should be the outer radius minus the padding between them.
- Outer card radius 24px, padding 16px: inner image radius 24 − 16 = 8px.
- Outer radius 12px, padding 16px: the result is negative, so the inner element should be square (0px).
- When an image runs edge to edge inside a card with no padding, give it the card's radius on the outer corners only, or let the card clip it with
overflow: hidden.
In CSS, if you store the outer radius and the padding as custom properties, the inner value can be written as calc(var(--radius) - var(--pad)), wrapped in max(0px, …) so it never goes negative.
Do's and don'ts
- Do keep inputs and buttons in a form on the same radius, so they line up as a set.
- Do cap pill shapes on inputs: a fully round text field looks odd once it's taller than one line, so give text areas a moderate radius instead.
- Don't round one element on an otherwise square page. It looks like a mistake.
- Don't use radius to separate things that need borders or spacing. Rounded corners don't create grouping.
- Don't let focus outlines ignore the shape. Modern browsers draw
outlinefollowingborder-radius; check yours does.
Accessibility
Radius rarely causes accessibility problems on its own, but very large radii on small controls can shrink the visible area and clip text or icons near the corners. Keep the hit area at least 24 by 24 CSS pixels, the minimum in WCAG 2.2's target size criterion at level AA, and larger where you can. If a control relies on its shape to be recognised as a button, its boundary still needs 3:1 contrast against the background.
Radius in Anticode
Each Anticode design system assigns radius by role: one value for controls and one for containers such as cards and panels, with images following the container value. Swiss, Brutalist and Luxury are square throughout. Editorial pairs pill-shaped buttons with square cards and images. Technical uses a small radius on controls and a slightly larger one on cards. Playful and Organic use pill controls with soft, large-radius cards, plus their signature shapes: Playful's irregular blob for the hero photo and Organic's arched hero image. Form inputs and booking slots cap the control radius so text fields don't become pills.
The Critic's “shape follows role” check is part of its nineteen-check lint on every build.
Questions people ask
Should buttons and cards have the same border radius?
Not usually. Controls and containers are different sizes and roles, so they read better with radii chosen for each, or both square.
How do I calculate a nested border radius?
Inner radius equals outer radius minus the padding between them. If that comes out at zero or below, make the inner element square.
Are rounded corners more user-friendly?
They feel softer, but square corners aren't less usable. What matters is that buttons look like buttons and the shape is consistent.