Consistent Rounded Corners in UI: Inner vs. Outer Radius

In modern user interfaces, rounded corners are a subtle but essential detail. They define the look and feel of components, guide visual hierarchy, and improve the perceived quality of a design. A common challenge occurs with nested elements—like cards containing inner containers—where the curves don’t visually align, leading to a slightly “off” or unprofessional appearance.

The simple, practical rule for consistent curves is:

1. Basic Rule: Adjust the Inner Radius

When an outer element has a border-radius and also includes padding, the content shifts inward. To make the inner curve visually consistent with the outer one, the following formula applies:

Inner radius = Outer radius − Padding

Example:

.card {
  border-radius: 24px;
  padding: 12px;
  background: #f0f0f0;
}

.card__inner {
  border-radius: 12px; /* 24 − 12 */
  background: #ffffff;
}

Outcome:

Curves appear concentric and harmonious.
The inner element does not break the outer form.

Rule of Thumb:

Subtract padding from the radius to keep the inner curve proportional.
For uneven padding (different top/right/bottom/left), use the smallest value to calculate the inner radius.

2. Why This Works: Geometric Principles

The formula Inner radius = Outer radius − Padding is based on geometric and perceptual principles:

2.1 Curve as a Quarter Circle

A border-radius forms a quarter-circle at each corner. Padding effectively shifts the inner corner along the normal inside this quarter-circle. Without adjustment, the inner element would visually appear “over-rounded” or misaligned.

2.2 Concentric Curves

For nested elements to look visually seamless, the inner curve must follow the same shape as the outer curve, just smaller. This creates concentric, smooth curves that appear intentional rather than accidental.

2.3 Human Perception

The human eye is extremely sensitive to inconsistencies in curvature. An inner radius that is too large will appear exaggerated, while one that is too small will feel sharp or off. Correctly calculated radii create the impression of continuity and polish.

2.4 Overflow and Clipping Considerations

Even when overflow: hidden is applied to the outer container, this principle matters. Background colors or shadows on inner elements can still reveal inconsistencies if the inner radius isn’t adjusted properly.

3. Practical Implementation Tips

3.1 Consistent Design Tokens

In scalable design systems, define radius and spacing as tokens:

:root {
  --radius-lg: 24px;
  --spacing-md: 12px;
  --radius-inner: calc(var(--radius-lg) - var(--spacing-md));
}

.card {
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.card__inner {
  border-radius: var(--radius-inner);
}

This ensures consistency across all components and simplifies maintenance.

3.2 Handling Asymmetric Padding

If your padding differs horizontally and vertically:

Horizontal inner radius = outer radius − padding left/right
Vertical inner radius = outer radius − padding top/bottom

Use the smaller of the two for a safe, visually consistent curve.

3.3 Shadow and Background Coordination

Curves become visually stronger when shadows or backgrounds are applied correctly. A consistent inner radius ensures that shadows follow the same path, enhancing the depth and professional look of your UI.

4. Visual and UX Considerations

Smooth, consistent curves signal attention to detail and high-quality design.
Inconsistent rounding can make interfaces feel unpolished or “fragile.”
Correct radius calculation improves perceived hierarchy, as rounded elements naturally draw attention without visual friction.

5. Summary

Practical rule: Inner radius = Outer radius − Padding
Reason: Geometric offset caused by padding + visual perception
Result: Harmonious, professional-looking UI elements that feel intentional and polished

Consistent rounding in the UI: inner and outer radii