Who’s Being Pedantic?
Improperly nested corners can be found in designs of all sorts, but I see them most often in icons and interfaces. If you’ve still no idea what I’m talking about, take a look at these two images of a lightbox mockup – which one has me grinding my teeth?
Yes, it’s the second which I’ll lose sleep over.
Put simply; if you have two rounded corners running parallel, the outer corner should have a larger radius which “flows” round the one on the inside.
Without wanting to go into mathematical formulae (did someone say pie?) try visualizing a central point, the “origin”, around which your first radius curves. Now use that same point to round your outer corner:
Form your curves this way and you’ll find the end result much easier on the eye.
Think of the effect you’re creating as like bending a pipe:
You do the Math
Interfaces built in html/css can be just as guilty of improperly nested corners. Think of form elements within a fieldset, or buttons within an alert box.
It’s not difficult to be dead accurate with it though; the difference in the border radius of your two objects should be equal to the gap between them. Simple!
And this can be flexible too, for example:
Perfectly bent pipe (check out the demo).
Take this interface for example; the gap between the contact button and the dropdown doesn’t look anything like a bent pipe. Saying that, all the corners in this interface have uniform radius, so nothing looks out of place:
Folks Who Get it Right
I think you’ve probably had enough of listening to me get wound up about something so trivial. Rather than draw attention to examples where I’ve seen it done awkwardly, let’s now take a look at some inspiring work by Dribbblers who do it right!
- Typepad 101: Add Rounded Corners To Your Photos (everything.typepad.com)
- Css Tools (sarahwebsolutions.wordpress.com)
- Exploring canvas drawing techniques (perfectionkills.com)
- Making and Bending the Mudgard (11127228mw.wordpress.com)
- Fun CSS3 for modern browers – Part 1 (christopherbeckerdev.wordpress.com)
- What can you learn making little squares? (firedupwelding.wordpress.com)
- Bending the Pipe (11127228mw.wordpress.com)
- Help! How Do I Measure the Corner Radius of My Pool? (royalswimmingpools.com)
- How to Create a Subtle Dropdown Checklist and Menu (onextrapixel.com)
- Weekend project: 15 super quick CSS tips (everything.typepad.com)