Getting Inner Border Radius Just Right

Getting Inner Border Radius Just Right

Online tool

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):

Getting Inner Border Radius Just Right - examples

A tool for the job

I have put together this little tool to help you guys out. If you have any improve­ments, you can fork the code here.

Tweet this

Comments

  1. Mathieu Vallee

    Hi if I put the pad­ding at 0 and border-radius at 10, there’s a little black corner did you know why it happens?

  2. Joshuanhibbert

    I’m not entirely sure why this hap­pens. It’s one of the many quirks of CSS.

  3. Gopi

    nice one..

    but, kinda off-topic, why this webpage scrolls very slow when scrolling by mouse­wheel.. it hap­pens only in Firefox!

  4. Josh

    I’m not sure, Gopi, it scrolls fine for me on all com­puters I’ve tested it on. Thanks for let­ting me know.

  5. Mark

    Same scrolling issues here, pro­lly some­thing in scripts.js

    OSX 10.8.2, Firefox 18b2

  6. Colin Wiseman

    Hello, am slightly con­fused at the com­plex­ity of this. Might be I don’t under­stand the situ­ations where this would occur. After read this and the post the ori­ginal post, I “fiddled” this together http://jsfiddle.net/WV5tq/4/ which just changes the width of the bor­der and applies a col­our to it, and thus let the browser deal with this “issue”.

    What would be good is a real world situ­ation where you’d have 2 divs try­ing to achieve this?

  7. Josh

    Colin, the tool is sim­pli­fied to illus­trate only the nes­ted bor­der radii. And although I’m using HTML ele­ments, it isn’t just for HTML ele­ments, it’s for design in gen­eral. For instance, have a look at the logo on this site: http://skiptunes.com/