Visual Design
Border Radius
Border radius is the amount of rounding applied to a corner, from a sharp right angle to a soft curve. A larger radius means a rounder corner.
Why it matters
Rounded corners shape how friendly or formal an interface feels, and small inconsistencies are surprisingly noticeable. Matching radii across nested elements keeps a layout looking tidy.
In depth
For nested shapes, the inner radius should equal the outer radius minus the padding between them, so the curves stay concentric. Skip this and you get a visible gap or a corner that pinches, a detail the eye catches even when the cause isn't obvious. This concentric rule is one of those quiet refinements that separates careful interfaces from rushed ones.
Real-world example
A rounded button placed inside a rounded card looks wrong when both share the same radius, leaving an awkward gap at the corner. The inner button needs a smaller radius to nest cleanly.
Related terms