Ronalds Vilciņš

The Hidden Math of CSS Rounded Corners

Rounded corners are a fundamental element of modern interface design. They soften edges, create visual harmony, and improve the overall aesthetic of user interfaces. However, there’s a subtle yet critical challenge that many designers overlook: how to properly nest rounded corners.

The Problem

When developers first apply border-radius to nested elements, they often encounter an unexpected visual issue. Simply using the same border-radius value for both outer and inner elements creates an awkward, disconnected appearance. The corners don’t seem to “flow” naturally into each other.

Visual Demonstration

Consider two scenarios:

  1. Incorrect Nesting: Applying identical border-radius values to nested elements
  2. Correct Nesting: Carefully calculated border-radius that creates a smooth, continuous curve

The Mathematical Approach to Nested Corners

To solve this problem, we need to think of border-radius mathematically – specifically, as segments of circles. Each rounded corner is essentially a quarter-circle intersecting at a point.

The critical equation for nested corners is:

--outer-radius: 1em;
--padding: 0.5em;
--inner-radius: calc(var(--outer-radius) - var(--padding));

Let’s break down a concrete implementation:

.inner {
    width: 5em;
    height: 5em;
    background: black;
    border-radius: 1em;
}
 
.outer {
    display: inline-block;
    background: lightblue;
    padding: 3em;
    border-radius: 4em; /* offset + radius of .inner */
}

Approaches to Border-Radius Management

Designers and developers face several strategies for managing border-radius in design systems:

  1. Multiple Tokens Approach:

    • Store separate inner and outer radius tokens
    • Provides explicit control
    • Can become complex to manage

  2. Dynamic Calculation Approach:

    • Use calc() to dynamically derive inner radii
    • More flexible and maintainable
    • Recommended for most modern design systems

When to Apply Nested Corner Principles

  • Form elements within containers
  • Buttons within alert boxes
  • Nested cards or components
  • Icon design
  • Complex interface layouts

Design is not about rigid rules, but about visual harmony. Some interfaces might intentionally break these guidelines for specific creative effects.

Tools and Techniques

CSS Strategies:

  • Use CSS custom properties for flexibility
  • Leverage calc() for dynamic radius calculations
  • Implement consistent spacing and padding

Most design tools don’t automatically handle nested corner calculations. Designers must manually adjust radii or use plugins that support this nuanced approach.

Common Mistakes to Avoid

  1. Applying identical radii to nested elements
  2. Ignoring the relationship between padding and border-radius
  3. Overlooking the visual flow between components

Conclusion

Mastering nested rounded corners is about understanding the mathematical relationship between elements and maintaining a consistent, flowing visual language.

The difference between the outer and inner border-radius should equal the gap between the elements.

When in doubt, visualize the corners as quarter-circles. If they don’t smoothly transition, adjust your radii and padding accordingly.

Code Snippet Reference

:root {
  --base-radius: 1em;
  --nested-radius: calc(var(--base-radius) - var(--padding));
}

This comprehensive approach provides designers and developers with a deep understanding of nested rounded corners, combining mathematical precision with design intuition.