Public Service Announcement: Careful With Your Nested Border-Radii

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.