How To Choose Border Radius Values
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
What border radius signals
Border radius is one of the most under-considered design decisions on the web. Pick 4px and your UI feels corporate; pick 16px and it feels friendly; pick 9999px and you’re making pills. The shape of corners sets tone before a user reads a single word. This guide covers how to choose radii consistently across a product, the relationship between element size and radius, nested radius rules, advanced values like squircles and superellipses, and the scales used by well-known design systems.
Radius scales — what design systems use
Don’t invent new values per component. Pick 4-6 steps, apply across the whole UI.
Element size affects perceived radius
A 4px radius on a 32px button looks proportionally different from a 4px radius on a 400px card.
Nested border-radius — the math
Inputs and buttons (32-40px tall): 4-8px radius.
Squircles and superellipses — the next step
Cards (100-300px wide): 8-16px radius.
Individual corner control
Hero sections or full-width panels: 16-24px radius.
Elliptical corners
Avatars and icon buttons: 50% (circle).
Border radius and performance
When one rounded element sits inside another, the inner radius must be smaller than the outer radius for them to look concentric.
Common mistakes
Example: card has 16px radius and 12px padding. Inner element should have 16 - 12 = 4px radius for aligned curves.
Run the numbers
For most UIs, the visual difference between 12px circular radius and a 12px squircle is subtle — viewers perceive smoothness without noticing the math. Only visible at large sizes.