Setting a Proper Corner Radius

Rounded corners are a key component in interface design. Apple’s iPhone, in particular, vaulted these little rounded-corner square-shaped icons into prominence. You see rounded corners everywhere these days. And all to often, I see rounded corners that seem to have been executed as an afterthought.

Designers: please spent just a few extra minutes making sure your rounded corners are done right. Examples of negligence are easiest to spot when a rounded-corner shape is inset inside another rounded-corner shape.

If the corner radius is the same for both shapes, you’ll have problems. If Square A sits inside of Square B and is smaller than Square B, the corner radius for Square A also has to be smaller. See the examples below:

Examples of proper and improper corner radii.

Its entirely possible that there’s a Mr. Wizard math formula that will help you figure out how to adjust the corner radius depending on the change in size of the shape, but I’m not smart enough to figure that out. This doesn’t have to be rocket science, though.

A designer’s keen eye is often enough to prevent the problem. Spending just a couple of extra minutes paying attention to the details will make the world a better place, don’t you think?

4 Comments

  1. Heather says:

    So true! I’ve seen this a lot too and it’s really not that hard to spot. Hopefully everyone takes your advice. :)

  2. Rick says:

    Great point. I could not agree more. I see this way too often and it drives me crazy. I like to think of it as the same as a curvy race track: when the track bends or turns, the road does not widen or narrow through the turn, it stays the exact same width. Same thing here.
    Thanks,
    Rick

  3. Ryan Brill says:

    There is an easy way to do this using a purely geometrical approach, which will remove the guesswork and ensure you have complementary radii. The Mr. Wizard math formula, if you will.

    Envision your outer radius being a circle and mark the center point. Now, draw a new circle with the same center point for your inner radius. Voilà, a perfect inner radius: http://cl.ly/CStC

  4. Guilty of this all too often, thanks for pointing it out on a Dribbble shot of mine, I have become all to aware of these days and yes – you see it everywhere. Good eyes you have sir!