Public Service Announcement: Careful With Your Nested Border-Radii
December 6, 2011
by Chris Coyier
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.
This post brought to you by DICK™ (Details Improve Creative worK).
Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.
The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.
Wufoo is the most powerful online form builder out there. Easily build multi-page forms, add logic and branching, customize the design, take payments, and much more.
Try it free!
*May or may not contain any actual "CSS" or "Tricks".