Have you ever wondered what the radius in border-radius means?
The value you pass is the radius of an actual circle that the browser places at each corner. The arc of that circle replaces the sharp edge. border-radius: 20px means a 20px-radius circle at every corner.
Bigger radius, bigger circle, rounder corner. Set it to half the element's size and the arcs meet — you get a full circle.
Nested corners
This is something I got wrong for a long time. Say you have a rounded container with a rounded child inside it, and you give both the same border-radius. It looks fine at first glance, but look at the corners — the gap between the two boxes is uneven. Thicker at the corners, thinner on the sides.
Drag the padding up to make it more obvious. Both boxes have border-radius: 24px, but the curves don't run parallel. The corner gap bulges outward.
The fix is simple. The inner radius should be the outer radius minus the padding.
That way both curves share the same center point, and the gap stays uniform everywhere.
Both circles share the same center, so the curves stay concentric. The red circle is the outer radius, the green one is the inner. Drag the sliders to see how the formula keeps the gap uniform.