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

Using negative values has solved the problem for me.

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;

Answer 2

Beth Fauld's solution almost works, there is only a slight mistake, it should look as follows:

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

Where #fff is the background color (outside the box), and #333 is the shadow color.

The third value in -webkit-box-shadow defines the blur size, while the fourth defines the shadow (opaque) size, so it's the latter that should be set to 1px.

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.