Box-shadow and border-radius bug in Chrome

Question

Hello,

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-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;

Rendering in Opera and Firefox are same and perfect:

But Chrome renders shadow outside the border:

Is it supposed to be so or I missed something important?

Answer 1

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 2

opera box-shadow bug

Answer 3

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

Good luck!

Answer 4

Has someone got a working example of this bug?

I saw this bug during the early stages of writing this piece, but it fixed itself by the time I finished the article.

http://blogs.sitepoint.com/2010/10/26/shadow-boxing-image-free-css3-glossy-buttons/

There's a working example linked from that page too.

I'm damned if I can make the bug appear again now..