This is still current on Chrome 5.0.375.125, which is the latest Windows release at the time of this writing.
Bug is tracked here: http://code.google.com/p/chromium/issues/detail?id=25334
So, the problem is, if you're on Windows or Linux, and someone uses inset box-shadow on an element that also has border-radius, you get a bug -- the border-radius is preserved, but the inset box-shadow spills out of it, as if it were still a square box. It works as expected in Chrome on Mac OS X.
people using textured backgrounds can't use this hack, because it requires an opaque border color. It also only really works well on smaller radius.
Two parts to this hack. A little Javascript (jQuery + jQuery.client plugin):
if ($.client.browser == "Chrome" && $.client.os != "Mac"){
$('html').addClass("inset-radius-hack");
};
And CSS
#div{
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
padding: 5px 10px;
margin-bottom: 10px;
max-width: 120px;
}
html.inset-radius-hack #div {
border: 2px solid #fff; /* cover the edges with the border
margin: 0 -2px 0 -2px; /* and take back the extra pixels the border adds
}
Can I take a shower now? This hack makes me feel gross.
Has anyone come up with a better workaround for this?