Question

I have a containing element to my SVG. This element has an inset box shadow. Unfortunately when elements go near the sides that have fill they actually get drawn above the box shadow rather than under it. How can I get around this issue?

Here is a jsFiddle showing the problem

HTML:

<div id="holder"></div>​

CSS:

#holder {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6) inset;
    margin: 10px;
    width: 200px;
    height: 200px;
}​

Javascript:

window.onload = function() {
    var r = Raphael("holder", 200, 200);

    var rect = r.rect(140, 140, 150, 150);  
    rect.attr({fill:"#fff"});    
};

Answer 1

You would have the same problem if instead of having an SVG you would have an image. Fortunately, the workaround for images is well known: apply the box shadow on a pseudo-element that covers the div, example:

#holder {
    margin: 10px;
    width: 200px;
    height: 200px;
    position: relative;
}

#holder:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6) inset;
}
​

http://jsfiddle.net/VxxwJ/