How do I remove only the top part of a box-shadow?

Question

I'm using border-radius and box-shadow to make a glow around an element.

Can I remove only the top part of the box-shadow?

Live example

div {     margin-top: 25px;     color: #fff;     height: 45px;     margin-top: -5px;     z-index: -10;     padding: 26px 24px 46px;     font-weight: normal;     background: #000; /*#fff;*/     border-top: 0px solid #e5e5e5;     border-left: 1px solid #e5e5e5;     border-right: 1px solid #e5e5e5;     border-bottom: 1px solid #e5e5e5;     -webkit-border-radius: 3px;      -khtml-border-radius: 3px;        -moz-border-radius: 3px;             border-radius: 3px;     -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;      -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;        -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;             box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; } 

Edit: this little thingy is the problem!

Answer 1

This works, but I'll admit to not knowing if there's a better way (or if it's possible without adding a wrapper element). Using multiple box-shadows would be a good idea, but I can't seem to make it look the same.

See: http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">     <div> something </div> </div> 

CSS:

#bla {     overflow-y: hidden;     padding: 0 10px 10px 10px;     margin: 0 -10px } #bla > div {     /* the CSS from your question here */ }