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?
What you (probably) want to achieve is something like this:
When having a closer look at one of the corners and add a few lines, we see this:
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).
