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.

Answer 2

It looks like a known bug:

http://code.google.com/p/chromium/issues/detail?id=29427

Check out the bug discussion, you may find a workaround. Definitely Star this bug if you want it to be fixed sooner!

Answer 3

This bug has been fixed in the latest canary build. :)

Answer 4

Putting in first an inset shadow that is the same colour as the background seems to work pretty well without putting extra markup on your page.

E.g. if you had a white background page :

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;

Answer 5

Try this -webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); using rgba seems to fix it.

Good luck!

Answer 6

Good news! Looks like a fix is coming through. Here's the ticket in WebKit Bugzilla, marked as resolved/fixed: https://bugs.webkit.org/show_bug.cgi?id=41576

And here's the commit to trunk in WebKit's Trac! http://trac.webkit.org/changeset/74089