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

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?

-

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:

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.

-
I'm glad the answer is so easy! – Mike Brand Oct 16 '12 at 18:11
I had tried recreating this by comparing a round-rect with an outside border of 50 px, and a new (50px wider and taller) round rect with a 50px higher radius. They didn't quite match up, but now I imagine that's mainly a quirk of Photoshop's outline rendering Thanks for your answer! – Mike Brand Oct 16 '12 at 18:17
@Mike: Remember that the distance needs to be added to both sides of the rectangle. So if you want the outer rectangle border to be 50 px from the inner, you need to make the outer rectangle 100 px wider and taller than the inner one (and increase the corner radius by 50 px). – Ilmari Karonen Oct 16 '12 at 18:43

If you want the corners to have shared centers, the outer shape's corner-radius should simply be the inner shape's corner-radius plus the distance between the shapes. If your inner shape has a rounded corner-radius of 5 pixels, and your outer shape is 1 pixel away, the outer shape's corner-radius should be 6 pixels. (Not accounting for any stroke weights.)

-