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

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 */
}

Since you use box-shadow, you can use pseudo-element to create it and place under your div, placing it so only the needed parts would be visible: http://jsfiddle.net/kL8tR/60/

There are some important notes:

• The pseudo-element must have z-index: -1
• The div itself must have position: relative and no z-index

Pseudo-elements + CSS3 = awesomeness :)

@milo; is not your top border it's a shadow which you give in your code

for removing top glow you have to define vertical spacing of your shadow.

Write this in your shadow css:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

& your can generate from here http://css3generator.com/

NOTE: there are four properties of shadow are horizontal, vertical, blur & spread for inside shadow you can define inset for it