Corners, four at a time or one

Corners, four at a time or one

With the shorthand collapsed as far as it will go, because 8px is easier to maintain than 8px 8px 8px 8px.

When a radius is bigger than the box

Ask for a 60px radius on a corner of a 60px-wide element and you will not get it. The two radii meeting along a side cannot together exceed the length of that side, and rather than clipping one corner and leaving the rest, CSS scales every radius on the element down by whatever single factor makes them all fit.

The behaviour is sensible and the symptom is confusing: change one corner and all four visibly change, including corners you did not touch. If a shape stops responding proportionally to the number you are typing, this is almost always why, and the fix is either a smaller radius or a larger box.

Nesting: the inner radius is not the outer one

Put a rounded card inside a rounded container with padding between them, give both the same radius, and the corners will not look concentric — the inner curve appears too tight, as though it were pinched. The eye is right. For two curves to stay parallel, the inner radius has to be the outer radius minus the gap between them: an outer 16px with 8px of padding wants an inner 8px.

It is one of the details that separates an interface that looks assembled from one that looks drawn, and it costs nothing but the subtraction. Where the padding is larger than the outer radius the answer goes to zero rather than negative, and a square inner corner is correct.