CSS and Nested Border-Radii

Posted within Development on

Now, this is an issue I’ve stumbled across while putting together CSS for websites.

You have two elements, one nested within the other, and both have rounded borders. Unless you get the radius of the nested element just right, you’ll end up with a nasty looking ‘hump’ where there should be a nice smooth curve (See Chris Coyier’s post for a visual example).

Fortunately, Joshua Hibbert has blogged about the problem, documented the math­em­at­ical for­mu­las and even coded a tool for the job. Great!