The concentric border-radius rule: why nested rounded corners look slightly wrong

You round a card at 16px. You round the thumbnail inside it at 16px too, because that's the design token. Then you squint at it and something is off — the gap between the two curves looks fatter at the diagonal than it does along the straight edges, and the inner corner reads as slightly pinched. Your eyes are right. Two rounded rectangles only look parallel when their radii differ by exactly the distance between them. The rule inner radius = outer radius − gap Where gap is the distance from the outer box's border edge to the inner box's border edge: border-width + padding. The reason is just where the arc centres land. Put the outer box's top-left corner at (0, 0) with radius R: its corner arc is a quarter circle centred at (R, R). Inset the child by p on both sides and give it radius r, and its arc is centred at (p + r, p + r). Those two centres coincide only when p + r = R, i.e. r = R − p. Concentric arcs, constant p gap the whole way round the curve. A