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):
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.
You’re a legend mate
Ha, I appreciate the kinds words Pedro!
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?
I’m not entirely sure why this happens. It’s one of the many quirks of CSS.
nice
Thanks, Suresh!
I explored inner border radius as an example when I wrote about extending in-browser development tools for design work. Joshua, thanks for the post and the tool you developed to go along with it. It’s come in very handy!
If you’re interested, the article is here:
http://blog.colin-gourlay.com/blog/2012/03/how-can-browser-based-development-tools-better-aid-visual-design/
Thanks for sharing that link, Colin. It’s a great read!
nice one..
but, kinda off-topic, why this webpage scrolls very slow when scrolling by mousewheel.. it happens only in Firefox!
I’m not sure, Gopi, it scrolls fine for me on all computers I’ve tested it on. Thanks for letting me know.
Same scrolling issues here, prolly something in scripts.js
OSX 10.8.2, Firefox 18b2
Alright, thanks, Mark. I think I’ve fixed it now.
Yup, fixed here.
Awesome! Thanks for your help, Mark.
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?
(excuse my pretty pathetic grammar…I really should have read over it)
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/
Bookmarked!
Thanks!
No worries, George :)