12

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?

Improve this question

2 Answers 2

Reset to default
16

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.

Improve this answer
3
  • I'm glad the answer is so easy!
    – Mike Brand
    Oct 16, 2012 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, 2012 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, 2012 at 18:43
8

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

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.