Posts Tagged ‘images’

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?

Placehold.it

Quick and simple image placeholders – Genius!

Image Spark

Discover, share, tag, and converge images that inspire you and your work.