Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
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
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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