Why nested rounded corners look off and how to fix them with one CSS rule

When two rounded rectangles share the same border-radius value, their curves appear uneven because the gap between them widens at the diagonal. The fix relies on a simple geometric rule: the inner element's radius must equal the outer radius minus the spacing between them. CSS custom properties make this easy to maintain by using calc() to derive the child radius automatically from the parent's padding and border width. Developers should also use max(0px, calc(...)) to prevent negative values, which CSS silently discards rather than flagging as errors. When horizontal and vertical padding differ, the slash syntax in border-radius allows separate values for each axis to keep both curves visually parallel.