When I try to apply a box shadow to my element that has a 3px border radius I get ugly corners with pixels of the elements background.
HTML
<div id="wrapper">
</div>
CSS
body {
background: #fff;
}
#wrapper {
background: black;
width: 300px;
height: 300px;
margin: 40px auto;
border-radius: 3px;
-moz-box-shadow: inset 0 0 5px 4px yellow;
-webkit-box-shadow: inset 0 0 5px 4px yellow;
box-shadow: inset 0 0 5px 4px yellow;
}
JSFIDDLE
http://jsfiddle.net/PCzFC/1/
If you look at the fiddle you see that the black background is in the corners. Is it supposed to be like this or is it a bug? I use Firefox.
This is a known bug in Google Chrome, perhaps it’s present in Firefox as well.
http://code.google.com/p/chromium/issues/detail?id=29427