: 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

@Berumen635

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

Vote Up Vote Down

@Tiffany317

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.

Vote Up Vote Down