Advertisement


How to compute the radii (radiuses) of corners for concentric rounded rects


Question

I have a roundrect button that I want to contain within another roundrect. The containing roundrect should always be 1px away from the button.

If I make the radius on the container too small then the corners have a larger gap around them.

Is there a good "rule of thumb" that I can use to figure out what the radius should be for the larger roundrect?

2012/08/13
1
9
8/13/2012 7:28:00 PM

If you want the outer roundrect to be 1px away from the inner one, then the corner radius of the outer rectangle should also be 1px larger than that of the inner one.

Here's a quick diagram that may help you see how it works:
Corner radius diagram
The inner rectangle has a corner radius of r pixels; its corner follows the arc of the inner red circle, which has a radius of r pixels and its center correspondingly r pixels away from the sides of the rectangle.

The outer rectangle has a corner radius of r+1 pixels; its corner follows the arc of the outer red circle, which has a radius of r+1 pixels and its center correspondingly r+1 pixels away from the sides of the rectangle. Since the outer rectangle is also shifted one pixel up and to the right of the inner (and, we may presume, is two pixels wider and taller to compensate), the two circles are concentric, and the distance between them is always one pixel.

2012/08/13
12
8/13/2012 8:23:00 PM