About the Nested Border Radius Calculator
When you nest a rounded element inside another rounded element, using the same radius looks wrong. This calculator gives you the correct inner radius so both corners share the same center point and look visually perfect.
How Nested Radius works
The rule is simple: inner radius = outer radius − gap, where the gap is the padding or border between the two elements.
Example: an outer radius of 24px with an 8px gap needs an inner radius of 16px. If the result is negative, use 0.
Common uses
- Make nested cards and buttons look correct
- Match inner and outer rounded corners
- Design concentric UI elements
- Avoid mismatched, lumpy corners
Frequently asked questions
Why not use the same radius for both?
Because the inner corner sits closer to the center; matching radii makes the corners look uneven. Subtract the gap.
What counts as the gap?
The padding or border thickness between the outer and inner element.
What if the result is negative?
Use 0 — the inner element should have square corners when the gap is larger than the outer radius.