35

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:

alt text

But Chrome renders shadow outside the border:

alt text

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

1
  • 3
    I found this bug the other day. It made me sad. What also makes me sad is that Safari doesn't support inset box shadow at all.
    – jessegavin
    Jun 2, 2010 at 20:41

10 Answers 10

28

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!

7
  • Thanks, hope this bug will be fixed soon. Stared it. May 30, 2010 at 8:33
  • As of today, it's fixed and available in the dev channel! (It'll be between 4 and 10 weeks when it goes to everyone in the stable channel) More details: paulirish.com/2011/chrome-inset-box-shadow-bug-fixed
    – Paul Irish
    Jan 6, 2011 at 8:11
  • 3
    Even if they say if fixed, i still get the problem: if I set an inset box shadow with 1px blur, and bottom only border radius, I got two ugly uniform bands (not blurred) on the sides of the element. if i change the shadow blur even of one pixel they disappears, and the size of this bands is related to the horizontal value of the bottom shadow, not to the vertical. If this means fixed...
    – Bakaburg
    Jun 2, 2011 at 17:39
  • 2
    It's September 12, 2011 and this is still a problem...it has NOT been fixed (even on the latest version of Chrome (Chrome v13) ).
    – zakdances
    Sep 12, 2011 at 18:04
  • 2
    it's 2013 and nobody fixed it! People, please star this bug. it's very important for the human race to continue doing CSS properly.
    – vsync
    May 23, 2013 at 9:30
6

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;
0
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.

2
  • Thanks for answer, but I suppose it's not the best decision to add more markup just to hide one browser's bug. Furthermore, there were significant progress in webkit, probably leading to fix in near future. Dec 30, 2010 at 16:23
  • One year is gone away.. but this bug was not fixed yet ).
    – Tony
    Oct 25, 2011 at 12:57
3

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.

1
1

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

1
  • Judging by Chromium issue comments, it's Chrome specific bug. Don't know if WebKit fix will be good for Chrome. Dec 16, 2010 at 11:01
1

Twelve years later, in 2023, I still see sites presenting that bug.

I noticed that the annoying square shadow goes away by setting blur-radius to a high value and at the same time spread-radius to a negative value.

-webkit-box-shadow: 0 0 11px -5px #555;
box-shadow: 0 0 28px -16px #1c3d5c;
0

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

Good luck!

2
  • Don't know how in the world did it get fixed for you. I'm using rgba and it's still displaying it outside the border-radius. Only on mac it shows ok.
    – Ragnar
    Sep 8, 2010 at 10:25
  • Doesn't seems to work for for me either (6.0.472.55 on Win2k3). Sep 14, 2010 at 15:56
0

Using negative values has solved the problem for me.

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;
1
  • Your solution doesn't use an inset box shadow. The bug does not appear for non-inset box shadows. Mar 6, 2011 at 20:21
0

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

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.