Public Service Announcement: Careful With Your Nested Border-Radii

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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.