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):
bulging
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.

correct2

3 Responses to “Concentric rounded rectangles”

  1. Jesse Says:

    Sweet. I’ve made this mistake before.


  2. […] 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 […]

  3. Jeremy Herrman Says:

    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.


Leave a comment