Getting Inner Border Radius Just Right

Firstly, if you aren’t sure what I am talk­ing about, I would recom­mend hav­ing a read of this art­icle by Chris Coyier.

Alright, now to the for­mula that I use to make sure that I get my nes­ted bor­der radii just right: x = z — y, where x is the inner bor­der radius, z is the outer bor­der radius, and y is the space between the two ele­ments (as shown above). Keep in mind that for this for­mula to work, both pseudo circles formed by the bor­der radii need to have the same centre point.

Now, unlike most math­em­at­ical for­mu­las, this one isn’t always right. You may encounter the odd situ­ation where the res­ult doesn’t look quite right, so keep in mind that this is only a guide; you may need to eye­ball it to get it perfect.

Here are a few examples of the for­mula in action (as you can see, the top right has been adjus­ted slightly):

A tool for the job

I have put together this little tool to help you guys out.