Box-shadow and border-radius bug in Chrome

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?

---

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!

---

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;

---

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.

---

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.

---

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

---

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

Good luck!

---

Using negative values has solved the problem for me.

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

---

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

---

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.