Question

Is there any way to create a css box-shadow in which regardless of the blur value, the shadow only appears on the desired sides?

For example if I want to create a div with shadows on left and right sides and no shadow on the top or bottom. The div is not absolutely positioned and its height is determined by the content.

— Edit —

@ricebowl: I appreciate your answer. Maybe you can help with creating a complete solution to fix the problems stated in my reply to your solution… My page setup is as follows:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="clearfooter"></div>
</div>
<div id="footer"></div>

And CSS like this:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
       position:relative; padding:0px; background-color:#e6e6e6; 
       -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
       3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px 
           auto 0px auto;}

Answer 1

As I stated in a related question of mine the solution to this problem is either very obscure or is not possible with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

I resorted to using a png shadow as it seems to be the only sane solution.

Thanks for all of your suggestions.