I haven't shared this before, but here's my bulletproof formula for...

8 views Jul 05, 2026

                            1
                        
I haven't shared this before, but here's my bulletproof formula for calculating a perfect concentric radius. 

Here's the full source code

                            3
                        
So first, the design question: a card with border-radius r contains an element inset by padding p. What border-radius should the inner element have? This is a corner curvature estimation problem.

                            4
                        
First, we formalize. The inner boundary is not "a smaller rounded rectangle." It is the level set f(x,y) = −p of the outer boundary's signed distance field; or, equivalently, the Minkowski erosion of the outer region by a closed disk of radius p.

                            5
                        
Now the corner. Corners are straightforward: locally, a rounded corner is a circular arc, so we model it by its osculating circle, characterized by curvature κ = 1/R.

                            6
                        
Offsetting a curve inward by p transforms its curvature by the classical parallel-curve relation, κ′ = κ / (1 − p·κ). So for something like κ = 0.0625, p = 8: κ′ = 0.125 px⁻¹. The analytic estimate of the inner radius is the reciprocal of κ′.

                            7
                        
This is good enough for back of napkin design, but an analytic estimate alone is not sufficient for production use. We need to confirm it numerically. We sample points on the eroded level set by Newton iteration along radial probes (fixed 100 samples).

                            8
                        
Finally, we fit a circle to the sample set by gradient descent on the squared radial residual.

5,000 epochs is plenty. Loss at convergence: 6.8e−30. Total cost: ≈5.5M FLOPs. Estimate: r̂ = 8.000000000000002 px.

                            9
                        
Now to validate our analytical estimate. Cross-validation: the fitted r̂ is compared against the analytic estimate from the parallel-curve transform (1/κ′ = 8). Observed disagreement: Δ ≈ 2.6e−15, comfortably within the reporting tolerance of 1e−9. For r=16 and p=8, we can confidently go to production with an inner border radius of 8 px.

                            10
                        
As always, there's an edge case worth noting: when p ≥ R the estimator returns the mirror-image radius |R − p|, so the reported result is clamped: r = max(R − p, 0); the corner is square.

I haven't shared this before, but here's my bulletproof formula for...

Actions

What You Can Do

More in Design & UX