The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

The Proper Way to Draw Rounded Corners

I’ve been noticing a lot of the same mistake people make when implementing rounded corners in their designs around the Web. For some reason the rounded corner poses a problem when it has another rounded corner inside it – so either there’s a border going around or there is another rounded shape sitting inside a rounded shape.

Here’s what I’m talking about:

I see a lot of these types of corners. You can see that the radius of the rounded corner is retained for the inner corner. This is wrong because if you retain the same radius, the amount of space between the two corners won’t be even throughout.

Here’s what even spacing looks like:

This is the right approach. What’s different? The radius of the inner corner is reduced. Ok, but how do you know how big this radius should be? That’s easy – if you think of the outer rounded corner as a circle, you can see where its center would lie.

Use this center for the inner corner as well, and you’ll get your radius. Using this method will ensure a perfect fit between the two shapes.

So there you go. This is the right way to do multiple rounded corners inside of each other. Of course, you don’t have to use the exact center – sometimes you need to shift it a little for the design to work. But please, don’t just use the same rounded corner and move it inward – that’s just wrong.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: