Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

designRAMS

Inconsistent Border Radius

SHOULD

SHOULD: Apply consistent border-radius values from a defined scale. Nested elements should have proportionally smaller radii (outer - border-width = inner).

Use consistent border radius values across components

Bad

Good

Why it matters

The upstream rule is that one bullet under "Components" (design-rams-shadow-consistency covers its shadow half); the explanation is ours. Radius is a material property: a product where every surface is cut the same way reads as one object, and a card at 4px next to a card at 12px reads as two products glued together. Define radius tokens and hand them out by role — controls one value, containers another, pills fully round — rather than choosing per component.

When one rounded box sits inside another, keep the curves concentric: child radius ≤ parent radius, ideally parent minus the padding (see design-nested-radii).

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.