Design & UX
Article

Border Radius and Inset Box Shadow Bug solution!

By Elliot Birch

Google Chrome on Windows is notorious for the border-radius/Inset box-shadow bug. This bug has now spread to the Mac version of Chrome (version 10.0.648.127).

If you aren’t familiar with the bug here is a quick run down of the problem: when applying a border radius on an input element, inset box-shadow will ignore the border-radius and act as if it isn’t there at all. Result? You receive an ugly hard corner that goes underneath your borders.

After a bit of a fiddle I came up with a solution and possibly found the actual cause of this issue. It turns out that if your border radius is larger than the height of the element (taking in to account padding, font-size, and so forth) this visual error will occur.

We actually suffered this problem here on Design Festival on the search input. Here was the initial CSS that we were using:

input.text, #s {
    float: left;
    width: 163px;
    border: 1px solid #C0C0BA;
    font-size: 85%;
    padding: 4px 15px 4px 30px;
    -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;
    height: 14px;
    }

input {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 2px 3px 3px;
    font-family: "Liberation Serif Italic", "Times New Roman", Serif;
    font-style: italic;
    }

Here’s a screenshot of how that rendered:

The render of the box shadow bug magnified.

The Fix

By changing the border radius of the input element I was able to fix the problem of the angry inset box-shadow.

Here is the finished CSS with the fix:

input.text, #s {
    float: left;
    width: 163px;
    border: 1px solid #C0C0BA;
    font-size: 85%;
    padding: 4px 15px 4px 30px;
    -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;
    height: 14px;
    }

input {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 2px 3px 3px;
    font-family: "Liberation Serif Italic", "Times New Roman", Serif;
    font-style: italic;
    }

That ought to do it. Have you encountered this bug?

More:
  • Ryan

    I’m confused. What bug is this fixing?

    That looks like your code was wrong to begin with, not a problem with Chrome. Or perhaps I’m missing something obvious!?

    • http://profiles.google.com/mraffaele.86 Michael Raffaele

      Regardless of if his code was wrong or not I think it is still interesting to point out the inconsistency between platforms.

    • Schlens

      You are missing the outward corners of the input box that show up instead of the correct inset shadow.

    • Avangelist

      Iw as about to say the same @Ryan, this isn’t a bug I have ever seen.

    • Elliot Birch

      Hey Ryan,

      On other browsers, namely Firefox, this “bug” doesn’t appear at all. If the rounded edges exceed a certain amount the inset box-shadow glitches and appears as if the element didn’t have rounded corners at all.

      You are right, I was wrong to begin with, but I didn’t expect chrome to react this way. It actually took me a while to figure out what the fix to the problem was and when I found it I thought others might find it helpful as I couldn’t find anything online about it.

      Cheers,

      Elliot

  • Mike

    I thought it was going to be lame and use some ugly divitis ‘solution’ like many other sites show. I haven’t tried it yet but this looks like an actual solution. Well done.

  • http://twitter.com/catalinred Catalin Rosu

    Hello Elliot, nice article. I also wrote about this behavior a while ago.

    I’d like to add something regarding your conclusion: “if your border radius is larger than the height of the element”.

    After my researches, I found that this behavior appears when: “if your border radius is larger than half-height of the element”. Hope this make sense :)

    • Elliot Birch

      Actually that does seem more accurate. When I was testing this out it didn’t seem to be the whole height but I couldn’t pin point the actual number. Thanks!

      Elliot

      • http://twitter.com/pixelBender67 Tony Brown

        Excellent article, nice work

  • David

    Trying to make a circle out of a square box, I came across this last September – at that time in Windows only. It seems to be fixed now – v.11.0.696.65 – on Mac anyhow. :)

  • http://twitter.com/JarodBillingsle Jarod Billingslea

    I would do the same thing if I was in this situation. lol.

    I thought everyone knew about this, however? It should have been obvious…

  • Muhammad Suhaib Asim

    Very Well Work Done!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.