Box-shadow and border-radius bug in Chrome

Question

I\'ve been experimenting with CSS3 and found something strange. Heres\'s the part of DIV style:

border:#446429 solid 1px;
border-radius:15px;
-moz-border-rad         


        

Answer 1

The only workaround I've seen is to put a border on the element with the shadow and make that border wider than the shadow diffusion. So for an inset shadow like this:

box-shadow:inset 0 0 7px #000;

You would need to add a border like this:

border:solid 7px #fff;

It's the third number in the box-shadow declaration that you need to match (or exceed) with the border width. if you don't want a big fat old border on the element, you'll obviously need to make the border the same colour as the background behind it. So this workaround doesn't help much if your element is above a patterned image or a gradient. But on solid colours it works decently.