Public Service Announcement: Careful With Your Nested Border-Radii

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take the pain out of building site search with the Algolia hosted API. Start free now!

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.