Home/ Questions/Q 3987132
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T06:05:52+00:00

I would like to take advantage of the new CSS3 box-shadow feature for a

  • 0

I would like to take advantage of the new CSS3 box-shadow feature for a site I am working on.
The problem is that Chrome 9.0.5 and Opera 10 do not render the inset border correctly if there is an img inside (the borders are hiddden around the image area).

I understand box-shadow is still work in progress, but I would expect browsers to fully support it or fully ignore it.

<!doctype html>
<html>
  <head>
    <style>
        div {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;

            // CSS3 inset shade
            -moz-box-shadow: inset 0 0 20px red;
            -webkit-box-shadow: inset 0 0 20px red;
            box-shadow: inset 0 0 20px red;
        }
    </style>
  </head>
  <body>
        <div>
            <img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
        </div>
  </body>
</html>

Does one know some workaround to render the red shade correctly?

Thanks!

Edit: I am happy with the answer, but just wanted to add a live link to help other folks out there. Here it is

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Box-shadow is just above the background on the stacking order when using inset. Therefore, any image you have inside the div will cover the shadow.

    Per the W3C Specs

    In terms of stacking contexts and the
    painting order, the outer shadows of
    an element are drawn immediately below
    the background of that element, and
    the inner shadows of an element are
    drawn immediately above the background
    of that element (below the borders and
    border image, if any).

    In other words, Chrome and Opera are doing it correctly (FTR, FF 3.6.13 does the same thing as Opera).

    If you want the shadow to overlap the image, you have a few different options, depending on your needs:

    1. Set the image to the background property of the div.
    2. Absolutely position a div over the one with the image, make it the same size, and put the shadow there (not really recommended, as it’s convoluted and adds non-semantic markup).
    3. Make sure the backgrounds of the images are transparent (this will allow the shadow to show through, but non-transparent pixels will still cover the shadow).
    4. Consider using border-image and gradient, instead. (This one is also a little convoluted, but puts the gradient in the border itself, and you can fade to transparent using RGBA.)
    • 0