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-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

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 3

I just found fix, but it needs additional markup. We need place element with round corners and inner shadow into another container with the same round corners and overflow hidden.

<div class="foo"><div>Hello!</div></div>
<style type="text/css">
    .foo {-webkit-border-radius: 10px; overflow: hidden;}
    .foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>

Announced above fix with border crashes border radius and is incompartible with background image under element (because of border color).

Thanks.