Set CSS3 box-shadow not to be on top of div

Question

I have a div box with box-shadow set around it with the following CSS:

-moz-box-shadow: 1px 1px 15px #415a68;
-webkit-box-shadow: 1px 1px 15px #415a68;
-khtm         


        

Answer 1

You cannot do this with ONE div.

EDIT

box-shadow does not allow right and left shadows at the same time.

There is a trick, though...read on.

The rule takes four values:

1. defines the horizontal offset of the shadow. + value for a right shadow and - value for a left shadow.
2. defines the vertical offset. + value for a bottom shadow and - value for a top shadow.
3. defines the blur distance
4. defines the spread

That is all true. However, after some tests I found you can layer shadows.

All you need to do is separate the values with a comma.

So, for a left, right, and bottom shadow on one div, you can do this

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Example: http://jsfiddle.net/jasongennaro/HWCzJ/1/

Answer 2

div div
{
    box-shadow: 1px 1px 15px #415a68;   
    height: 100px;
    width: 100px;
}
div
{
    overflow: hidden;
    padding: 10px;
    padding-top: 0;
}

<div>
  <div></div>
</div>

http://jsfiddle.net/5rbrB/ here's an example using overflow: hidden; and padding-top: 0;