Public Service Announcement: Careful With Your Nested Border-Radii

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Learn Development at Frontend Masters

When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element’s border-radius is a bit less than the outer element.

Otherwise it makes kind of a too-thick “hump” around the edges.

Both have border radius of 20px;
Inside element’s border radius reduced to 17px

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.