Border Radius and Inset Box Shadow Bug solution!

Border Radius and Inset Box Shadow Bug solution!

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 (v... 00:13

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:

1	input.text, #s {

2	float: left;

3	width: 163px;

4	border: 1px solid #C0C0BA;

5	font-size: 85%;

6	padding: 4px 15px 4px 30px;

7	-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

8	-moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

9	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

10	background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;

11	height: 14px;

12

}

13

14

input {

15	-webkit-border-radius: 20px;

16	-moz-border-radius: 20px;

17	border-radius: 20px;

18	padding: 2px 3px 3px;

19	font-family: "Liberation Serif Italic", "Times New Roman", Serif;

20	font-style: italic;

21

}

Here’s a screenshot of how that rendered:

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:

1	input.text, #s {

2	float: left;

3	width: 163px;

4	border: 1px solid #C0C0BA;

5	font-size: 85%;

6	padding: 4px 15px 4px 30px;

7	-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

8	-moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

9	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);

10	background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;

11	height: 14px;

12

}

13

14

input {

15	-webkit-border-radius: 12px;

16	-moz-border-radius: 12px;

17	border-radius: 12px;

18	padding: 2px 3px 3px;

19	font-family: "Liberation Serif Italic", "Times New Roman", Serif;

20	font-style: italic;

21

}

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