There are a few ways you can go about making rounded corners on nested shapes, but only one produces ideal results.

The first option is to have the same radius for your inner and outer shapes, shown below at 10px. Although speedy, this produces corners that are chunky and ugly. Yuck. The second option is to scale your inner shape into your larger shape. Although this produces slightly less chunky corners, also not great. The ideal way to create nested shapes is with a little mathematics. Keep this little tip handy, and you’ll have perfect nested shapes that don’t thicken in the corners. Even if you approximate your dimensions, you’ll end up with better results. Ah, happy corners.

Inner Radius + Stroke/Border Thickness = Outer Radius

In the example below, the inner shape has a corner radius of 10px with a 10px stroke, giving us a 20px outer radius.