Prevent box shadow from showing on a specific side

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

There is a fourth distance you can define called the spread offset, which moves the shadow in or out on all 4 sides. So if you set that to the negative of the blur distance, this will shift the shadow inwards by the same distance as the blur extends the shadow outwards effectively hiding it. Of course this will also shift the shadow inwards on the side you do want it to appear so you'll need to increase the offset by the blur distance to undo that. i.e.

box-shadow: (horizontal + blur) 0px (blur) (-blur) color; 

So in your example:

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);