Concentric rounded rectangles
April 22, 2009
I was working with someone recently, and he ran into the bulging-concentric-rounded-rectangle problem, which you can see below (coincidently, Kirill posted about this very topic yesterday):
Notice that both rounded rectangles (outer and inner) have exactly the same roundedness (16 pixels in this example), which causes the illusion that the inner edge is drooping, or bulging.
Fixing this optical issue is easy — we just need to make the inner radius smaller than the outer radius. The exact way to calculate the inner radius is listed below. I’ve include how to calculate the value in the two ways you’ll likely need.