<p>What you (probably) want to achieve is something like this:</p>

<p><a href="https://i.sstatic.net/Y1crM.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Y1crM.png" alt="box"></a></p>

<p>When having a closer look at one of the corners and add a few lines, we see this:</p>

<p><a href="https://i.sstatic.net/4w6mA.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4w6mA.png" alt="corner"></a></p>

<p>The black lines indicate that the center points of the circles along the borders of the red and blue boxes is the same. If the outer radius of the red box, for example, is $50px$, and the distance between the outer borders of the red and blue boxes is $25px$, this leads to a border radius of $50px - 25px = 25px$ for the blue box. The distance, obviously, is dependent on the stroke width of your red stroke.</p>

<hr>

<p>Note: When creating the above images, I simply drew two filled boxes with rounded corners. So first a filled red box and then a smaller filled blue box above it. This also avoids some pixels being left white due to rounding errors (no pun intended).</p>

CC BY-SA 3.0
2015-11-18T20:37:37.240Z
Yes, that's what I'm after, but there's still an overlap. If it helps, I'm using Adobe After Effects’ shape layers and expressions to create this. Rectangle 1 is driving Rectangle 2's round corner value.

e.g.

Rectangle 1
Round Corners = 30

Rectangle 2
Stroke width = 40
Round Corners = 60 (30*2)

produces this:
![rectangles2](https://dl.dropboxusercontent.com/u/1414976/rectangles2.png)

I've set the opacity of Rectangle 1 to 50% so you can see the overlap. The darker purple is the edge of Rectangle 2's stroke.

I can supply by After Effects file if it will help.
Greg Gunn
CC BY-SA 3.0
2015-11-18T20:46:16.047Z
@GregGunn If your inner/blue box has a border radius of $30px$ and the red stroke's width is $40px$, then the radius in the middle of the red stroke needs to be $30px + (40px/2) = 50px$.
Nero
CC BY-SA 3.0
2015-11-18T20:58:43.250Z
@Nero Nailed it. That equation works perfectly—thank you.
Greg Gunn
CC BY-SA 3.0
2015-11-18T07:56:05.453Z
2015-11-18T07:56:05.453Z
Nero
<p>I have two rectangles — one with a fill (blue) and one with a stroke (red). The red rectangle is being offset (depending on the stroke width) so that it appears snug and outside the edge of the blue rectangle.</p>

<p>This set up works great except when I need to round the corners. </p>

<p>As you can see I'm getting gaps between the rectangles and I'm stuck trying to figure out the math to calculate the right roundness amount for the outside rectangle (red).</p>

<p>Any ideas?</p>

<p><img src="https://dl.dropboxusercontent.com/u/1414976/rectangles.png" alt="Rectangles"></p>

CC BY-SA 3.0
2015-11-18T09:05:37.100Z
I was considering a similar solution to Nero's answer, but you've tagged this [tag:bezier-curve]. Are you limited to using Bezier curves with thickness, or is drawing circular arcs actually an option?
Martin Ender
<curve><2d><bezier-curve><vector-graphics><line-drawing>
How to calculate matching roundness of two offset rectangles?
Greg Gunn
# How to calculate matching roundness of two offset rectangles?

(Asked by: username_0 on 2015-11-17)

I have two rectangles — one with a fill (blue) and one with a stroke (red). The red rectangle is being offset (depending on the stroke width) so that it appears snug and outside the edge of the blue rectangle.

This set up works great except when I need to round the corners.

As you can see I'm getting gaps between the rectangles and I'm stuck trying to figure out the math to calculate the right roundness amount for the outside rectangle (red).

Any ideas?

![Rectangles](https://dl.dropboxusercontent.com/u/1414976/rectangles.png)

**Tags:** curve, 2d, bezier-curve, vector-graphics, line-drawing

> **Comments:**
> **username_1**: I was considering a similar solution to username_2's answer, but you've tagged this [tag:bezier-curve]. Are you limited to using Bezier curves with thickness, or is drawing circular arcs actually an option?  

---

## 1 answers

### Answer by username_2 on 2015-11-18. Score: 7 | Accepted answer

What you (probably) want to achieve is something like this:

[![box](https://i.sstatic.net/Y1crM.png)](https://i.sstatic.net/Y1crM.png)

When having a closer look at one of the corners and add a few lines, we see this:

[![corner](https://i.sstatic.net/4w6mA.png)](https://i.sstatic.net/4w6mA.png)

The black lines indicate that the center points of the circles along the borders of the red and blue boxes is the same. If the outer radius of the red box, for example, is $50px$, and the distance between the outer borders of the red and blue boxes is $25px$, this leads to a border radius of $50px - 25px = 25px$ for the blue box. The distance, obviously, is dependent on the stroke width of your red stroke.

---

Note: When creating the above images, I simply drew two filled boxes with rounded corners. So first a filled red box and then a smaller filled blue box above it. This also avoids some pixels being left white due to rounding errors (no pun intended).

> **Comments:**
> **username_0**: Yes, that's what I'm after, but there's still an overlap. If it helps, I'm using Adobe After Effects’ shape layers and expressions to create this. Rectangle 1 is driving Rectangle 2's round corner value.  e.g.  Rectangle 1 Round Corners = 30  Rectangle 2 Stroke width = 40 Round Corners = 60 (30*2)  produces this: ![rectangles2](https://dl.dropboxusercontent.com/u/1414976/rectangles2.png)  I've set the opacity of Rectangle 1 to 50% so you can see the overlap. The darker purple is the edge of Rectangle 2's stroke.  I can supply by After Effects file if it will help.  
> **username_2**: @username_0 If your inner/blue box has a border radius of $30px$ and the red stroke's width is $40px$, then the radius in the middle of the red stroke needs to be $30px + (40px/2) = 50px$.  
> **username_0**: @username_2 Nailed it. That equation works perfectly—thank you.  

---

