Nested corners that line up.
Gives the right corner radius for shapes inside one another: a button in a card, a card in a window, a screen in a phone. The inner shape doesn’t take the same radius as the outer one, but the outer radius minus the padding between them:
inner = outer − padding
Both arcs then share the same center, and the band between them keeps the same width all the way into the corner. With the same radius on both, the band gets thicker in the corners, and it looks off.
If the padding is larger than the outer radius, the inner corner is square (0). Smooth corners (Figma’s corner smoothing, iOS icons) follow the same rule.
Free, no account, nothing is sent: it runs in your browser, even offline.