Grow your CSS skills. Land your dream job.

Public Service Announcement: Careful With Your Nested Border-Radii

Published by Chris Coyier

When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element's border-radius is a bit less than the outer element.

Otherwise it makes kind of a too-thick "hump" around the edges.


Both have border radius of 20px;


Inside element's border radius reduced to 17px

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.

This post brought to you by DICK™ (Details Improve Creative worK).

Comments

  1. Jerry
    Permalink to comment#

    Great tip Chris!!! Man, I really hope everything gets resolved with your domain. I can´t believe there is such evil in the world. You give us your knowledge for free, and some selfish person just decides to mess with you. Come on man (to hacker), please leave Chris alone!

    • Permalink to comment#

      Hi chris.
      I would love to hear recent news regarding the domain, you keep giving great tips like that, I would hate to see it down!

  2. Permalink to comment#

    You just need to make sure the two curves share the same center point. The difference in border radius should be the same as the distance between the borders.

    If you’re using a border that’s 5px wide and an outer border-radius of 25px the inner border radius should be 20px.

    There’s nothing fancy about the math.

    • Dan Smith
      Permalink to comment#

      Beat me to it!

    • I dunno, maybe. It seems to make sense, but that’s about the exact scenario as above. Outer had border radius of 20px and padding of 5px, but having the inner with 15px didn’t work, it was too straight/skinny. 17px felt more correct. How does that math work out?

    • This is an area where a CSS preprocessor can help a lot – rather than some quick math on paper that’s implied by declarative styles, you can make the math a part of the declaration – bonus points for using appropriate variables.

      We’ve all run into someone else’s CSS that has implied relationships between one element’s with a 25px border and another element’s 20px border. Code that documents itself makes everyone’s life easier.

    • Chris, you beat my first response, this one’s to the 17px comment – could this be a browser- or platform-specific rendering issue that makes 17px ‘feel right’?

      For exampe {-webkit-background-clip: padding-box;} is a webkit-specific fix for a webkit-specific border radius issue. Different browsers may be off in either direction, and may even change over time as spec implementations mature. Using the most exact value seems like an acceptable hedge.

      As always, thanks for posting and keep up the good work – I’m thrilled to hear this domain isn’t going anywhere!

    • Andy Doyle
      Permalink to comment#

      -webkit-background-clip: padding-box; didn’t appear to make a difference for me. (Chrome 15)

    • Chris Bowes
      Permalink to comment#

      All maths is witchcraft as far as I’m concerned.

  3. Dan Smith
    Permalink to comment#

    Great tip. I think the ‘fancy maths’ is quite simple though:

    Outer Radius – Padding = Inner Radius

    i.e. if the outer has border-radius:20px; padding:5px, then the inner should have border-radius:15px; /* 20px - 5px */

    • Permalink to comment#

      Your missing the inner border if there’s any, the final math would be:
      border-radius - padding - border-width

    • Permalink to comment#

      This formula is silly in many ways…just think it through :)

      I cant beleive when grown up folks in the creative/programming business talks about `fancy math` when it comes to basic trigonometry.

  4. Nice, really informative Chris. Thanks for sharing such things.

  5. Great, simple tip which should also be used in print designs as well.

  6. Now there’s a quality public service for ya! Nice one Chris

  7. kinda obvious :>

  8. Thanks Chris, this is something I’ve been doing for a while now but instead of any fancy maths I usually have the inner radius half of the outer radius which usually works ok.

  9. Tom
    Permalink to comment#

    Hi Chris. That’s good to know. Thanks :)

    Btw. just downloaded Safari to check for browser compatibility when working with my coding. Came her to check out the browser system, because your site rocks! :)

    At the bottom of your site, where you got those 4 “boxed” ads (DigWP etc) there’s no rollover effect, just hover-instant in Safari, Opera & Chrome. Works perfect on my main browser -moz-.

    Just thought you should know, No idea if that’s even worth fixing, or if its the meaning.

    Atleast, some really great stuff on your site. And i LOVE your new top nav. Cheers

    Tom.

  10. Im not quite following you on this one Chris.

    http://jsfiddle.net/wWcRK/

    I don’t see weird ‘hump’.

    • Woops, excuse the math in the comment tags, obviously 15 :d

    • Because in that case the inner border radius is part of the border itself and browsers deal with it for you. In my example above, no borders are used, it’s background-colors on two different elements.

    • Noah
      Permalink to comment#

      http://jsfiddle.net/qSEvC/

      here’s a better example, Wouter.

    • OwenB
      Permalink to comment#

      If you’re just doing it with a border like that, then there’s no need to make the inner div all that fancy either, just put the BG color on the outer div.

      http://jsfiddle.net/AJSgU/

      Also, if you were just putting text inside, then put the padding on the outer div, and remove the inner div completely. ;-)

    • Yeah, little tired today, didn’t read properly haha.

      @OwenB You’re right, dont know what i was thinking when i tried to duplicate :D

      @Noah Thanks mate ;)

    • Permalink to comment#

      Chris, I think the reason it’s better at 17px than the exact 15px is you’re working at a size where anti-aliasing can make 2px-worth of difference to the appearance of the curve. You’re also overlaying a dark colour on top of white and a lighter colour on top of that.

  11. Tom
    Permalink to comment#

    Aha Chris. Missed that valuable post! So what’s the deal with major browsers being so darn slow updating for us dev’s? or maybe, they just cant fix it?

  12. gw
    Permalink to comment#

    i like the DICK. LOL

    • Permalink to comment#

      Me too, but there’s one detail that got away in the form of a typo “When you have and element” should be “When you have an element”

  13. Mukarram
    Permalink to comment#

    Oh’ Allah, please help this guy as he is my master [i have learnt alot things from him] and he helps others! Ameen!

  14. I normally consider myself pretty intelligent but I hadn’t figured out “the formula” for getting the two border-radii correct either.

    Can anyone else confirm whether the “border-radius - padding - border-width” trick works? Or as Chris suggests, is it just a matter of fiddling around till you get it right?

    Thank for the article Mr. Coyier, completely agree with the DICK – *inject shifty look*.

    • Nikolaj Meedom
      Permalink to comment#

      What you want to achieve is that the to ’rounds’ share the same center. In that case the math is easy: outer-border – whats-in-between = inner-border. I’ll try to illustrate:

      x———-)—))

      But thats only math. What looks good can be little different though bacause of anti-aliasing (with such small radii as 15-20px).

      Trust your eyes

    • Permalink to comment#

      Basically we are talking about proportional scaling with rounded corners. Using a formula in this case make no sense at all. Just scale it as much as you feel it looks good.

  15. Permalink to comment#

    ;-) , I hardly see more detail for radius like your said! Cool!Cheer!

  16. Permalink to comment#

    This is a good point Chris. I had noticed the same thing not to long ago and came up with the following guide line:

    InnerRadius ~ OuterRadius-(gap/Pi):

    That is the border-radius of the inner element is roughly the border-radius of the outer element minus the space between the two( this could come from padding of the outer element or the border width of either element) divided by Pi ( 3 will do in a pinch).

    Normally I am dead on with this or off by +/- 1px, so my formula saves me a lot of time guessing, especially on large or complex gaps.

  17. Permalink to comment#

    thnx chris

  18. Permalink to comment#

    thnkx again!

  19. I reckon this shouldn’t be a kind of illusion (eye-error). I think browsers don’t do the math correctly. Maybe you should submit it as a bug Chris.

  20. Wow thanks so much! I was wondering why one of my boxes looked strange and I just realize it is because of this! Thanks so much!

  21. I love how you pick at the details! Keep it up!

  22. I keep seeing people posting about this kind of thing or doing it in their designs. I put together this little image which hopefully explains whats going on and how to fix it.

    basement31 – Multiple Border Radius explained

    Thanks, Brendan.

  23. My apologies to Chris, Lea thinks this was co-incidence rather than a rip.

  24. Thanks for the tip. These are the kind of details that actually make a difference!

  25. Permalink to comment#

    Great tip, thank U!

  26. i learned this just by eyeballing :) and brute force attempts… usually i use from 2 to 4 pixels less in radius depending on the outer radius…

  27. ultraman
    Permalink to comment#

    It’s outer radius – border width = inner radius

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".