Getting Inner Border Radius Just Right

Getting Inner Border Radius Just Right

Online tool

This post will take 1 minute to read.

What is inner border radius?

Firstly, if you aren’t sure what I am talking about, I would recommend having a read of this article by Chris Coyier.

Let’s do some maths

Alright, now to the formula that I use to make sure that I get my nested border radii just right: x = z – y, where x is the inner border radius, z is the outer border radius, and y is the space between the two elements (as shown above). Keep in mind that for this formula to work, both pseudo circles formed by the border radii need to have the same centre point.

Now, unlike most mathematical formulas, this one isn’t always right. You may encounter the odd situation where the result doesn’t look quite right, so keep in mind that this is only a guide; you may need to eyeball it to get it perfect.

Here are a few examples of the formula in action (as you can see, the top right has been adjusted 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 improvements, you can fork the code here.

Tweet this

20 Comments

  1. Mathieu Vallee

    Hi if I put the padding 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 happens. 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 mousewheel.. it happens only in Firefox!

  4. Josh

    I’m not sure, Gopi, it scrolls fine for me on all computers I’ve tested it on. Thanks for letting me know.

  5. Mark

    Same scrolling issues here, prolly something in scripts.js

    OSX 10.8.2, Firefox 18b2

  6. Colin Wiseman

    Hello, am slightly confused at the complexity of this. Might be I don’t understand the situations where this would occur. After read this and the post the original post, I “fiddled” this together http://jsfiddle.net/WV5tq/4/ which just changes the width of the border and applies a colour to it, and thus let the browser deal with this “issue”.

    What would be good is a real world situation where you’d have 2 divs trying to achieve this?

  7. Josh

    Colin, the tool is simplified to illustrate only the nested border radii. And although I’m using HTML elements, it isn’t just for HTML elements, it’s for design in general. For instance, have a look at the logo on this site: http://skiptunes.com/