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:
<img class=”alignnone” title=”bad rounded corner” src=”/images/0901/bad_corner.png” alt="” width=”300” height=”200” />
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:
<img class=”alignnone” title=”good rounded corner” src=”/images/0901/good_corner.png” alt="” width=”300” height=”200” />
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.
<img class=”alignnone” title=”center of a rounded corner” src=”/images/0901/corner_center.png” alt="” width=”300” height=”200” />
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.
<img class=”alignnone” title=”good rounded corner with center” src=”/images/0901/good_corner_ruler.png” alt="” width=”300” height=”200” />
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.