Have you ever looked at a card component or a button container and felt something was "off," even if you couldn't put your finger on it? More often than not, the culprit is an incorrect nested border radius.

As a Senior Product Designer, I see this mistake constantly. Designers often apply the same radius to both the outer container and the inner element, resulting in an uneven, "bulky" look where the corners don't feel concentric.

The Visual Math of Harmony

To create a mathematically perfect nested curve, your inner and outer radii must share a relationship with the padding between them. If the padding is inconsistent with the curve, the visual "smoothness" is lost.

The Golden Formulas

To ensure your UI looks professional and polished, use these three variations of the same rule:

  1. To find the Inner Radius: Outer Radius - Padding = Inner Radius.
  2. To find the Outer Radius: Inner Radius + Padding = Outer Radius.
  3. To find the perfect Padding: Outer Radius - Inner Radius = Padding.

Example in Practice

  • Incorrect: Outer Radius (24px) = Inner Radius (24px). This creates a warped look.
  • Correct: Outer Radius (24px) with 8px Padding means your Inner Radius must be 16px.

The Bottom Line: Great UI is built on the details. By applying this simple geometric rule, you move from "junior-level" visuals to a refined, systematic aesthetic that developers and users will appreciate.