Corners are relative: nesting rounded corners and corner-shape
shedsgns.me · 1,127 words · saved by 1 readers
Why rounded corners look wrong, the math that nests them, and the shape that breaks the formula.
Published 29 June 2026, 6 min read The number is not enough A border-radius is just a number. A number can't describe how a corner should feel. The same 12px looks generous on a small button and almost flat on a wide card. Place a rounded element inside another rounded element, give them the same radius, and the corners still won't line up. CSS .button, .card { border-radius: 12px; } /* same number, different corner */ Roundness is relative. Against a small element a radius reads soft, against a large one it nearly disappears, and inside another rounded element it has to bend around…
saved by
related reading
- border-radius CSS property - CSS | MDNdeveloper.mozilla.org
- Details That Make Interfaces Feel Betterjakub.kr
- Visual design rules you can safely follow every timeanthonyhobday.com
- Say precisely what you mean.index.how
- Smooth Shadow Pluginshadow.floriankiem.com
- Measuring their curvature, and the collective data : r/MakeupAddictionreddit.com
- Invisible Details of Interaction Designrauno.me
- Details That Make Interfaces Feel Betterinterfaces.dev
- Web Interface Guidelinesrauno.me
- Web Interface Guidelinesinterfaces.rauno.me
- Understanding Layout Algorithms • Josh W. Comeaujoshwcomeau.com
- Web Interface Guidelinesvercel.com