Prevent box shadow from showing on a specific side

Posted by kaile on Stack Overflow See other posts from Stack Overflow or by kaile
Published on 2010-03-02T01:46:35Z Indexed on 2010/05/13 3:04 UTC
Read the original article Hit count: 255

Filed under:
|

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;}

© Stack Overflow or respective owner

Related posts about css

Related posts about shadow