How to calculate matching roundness of two offset rectangles?

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?

• I was considering a similar solution to Nero's answer, but you've tagged this bezier-curve. Are you limited to using Bezier curves with thickness, or is drawing circular arcs actually an option? – Martin Ender Nov 18 '15 at 9:05

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.
• @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 Nov 18 '15 at 20:46