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.
April 23, 2009 at 5:57 am
Sweet. I’ve made this mistake before.
April 26, 2009 at 9:40 pm
[…] same as the outer radius, which up to now resulted in a poor visual result. Ken Orr blogged about how to improve this situation recently when using rounded rectangles […]
August 30, 2009 at 3:28 am
Thanks for posting this. I was dealing with the problem but wasn’t sure how to calculate the inner radius. Thanks for posting the ways to find it.