Corner Radius Calculator
Calculate harmonious inner radii for nested elements. Achieve optical perfection with Apple-style continuous corners.
Presets
Calculation Mode
Configuration
24 − 16 = 8
The Problem: Visual Tension in Nested Corners
When you place a rounded element inside another rounded element, using the same corner radius for both creates visual tension. The inner corners appear disproportionately round because the eye perceives the relationship between the curves and the gap between them.
This is particularly noticeable in cards with images, buttons with icons, or any nested UI component. The effect worsens as the outer radius increases or the padding decreases.
Same radius
✗ Wrong
Adjusted
✓ Correct
The Standard Formula
inner = outer − gap
The mathematical approach
The idea is simple: the inner radius should account for the space between the elements. If you have a 24px outer radius and 16px of padding, the inner radius should be 8px.
This formula works well in most cases and is mathematically precise. Some platforms even have built-in modifiers that calculate inner radii automatically for you.
Why the Optical Offset?
The standard formula is mathematically correct but doesn't account for human visual perception. Our eyes don't process geometry objectively—we perceive curves, weight, and relationships differently than a computer calculates them.
Two Perceptual Factors
Curve Weight
Larger radii carry more visual "mass", creating subtle tension with the outer curve.
Gap Perception
Smaller gaps make the inner curve slightly more prominent, needing a touch more reduction.
The Optical Formula
// Subtle optical correction (3-6%) curveFactor = 0.03 + (1 - gap/outer) × 0.03 offset = inner × curveFactor opticalInner = outer - gap - offset
The curve factor scales between 3% and 6%—a subtle adjustment that's just enough to improve visual harmony without being obvious. Smaller gaps mean the inner curve is slightly more visible and benefits from marginally more correction.
When to Use It
- Hero UI elements: Cards, modals, and featured content where visual polish matters most
- Large radii: The effect is most noticeable with radii >16px
- Tight padding: When the gap is less than half the outer radius
- Brand-sensitive contexts: Marketing pages, app stores, portfolios
For systematic design systems where consistency across platforms matters more than pixel-perfect optical tuning, the standard formula is often preferred.
Code Output
/* Outer container */
.card {
border-radius: 24px;
padding: 16px;
}
/* Inner element */
.card-image {
border-radius: 8px;
}
/* CSS Custom Properties approach */
:root {
--card-radius: 24px;
--card-padding: 16px;
--card-inner-radius: calc(var(--card-radius) - var(--card-padding));
}Visual Comparison
24px
8px
8px