CSS3 Box Shadow on Top, Left, and Right Only

Question

Greetings,

I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)

 #div {     -webkit-box-shadow: 0px 0px 10px #000;     -moz-box-shadow: 0px 0px 10px #000;     box-shadow: 0px 0px 10px #000; } 

What would be the best way to accomplish this?

Thanks!

UPDATE This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.

UPDATE 2 Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;     -moz-box-shadow: 0px -4px 7px #e6e6e6;     box-shadow: 0px -4px 7px #e6e6e6; 

This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!

Answer 1

use the spread value...

box-shadow has the following values

box-shadow: x y blur spread color; 

so you could use something like..

box-shadow: 0px -10px 10px -10px black; 

UPDATE: i'm adding a jsfiddle

Answer 2

It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.

#servicesContainer {   /*your css*/   position: relative; } 

and it's fixed! like magic!