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).
Learn HTML, CSS, and how to build iPhone apps at
Treehouse. Their library of over 1,000 current training videos from expert teachers can get you up to date on the latest web technology.
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".