How to make a shadow to go around the entire edge of a div, not an insert

Question

This is a very simple problem that I cannot understand.

I want the shadow cast all the way to the bottom of the div. Be that as it may, it covers most of the bottom:

And here is the code:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49) 

I need a shadow to go all the way from both sides.

thanks

EDIT: Am I going to do it wrong? Should I use a different CSS property?

Answer 1

To avoid the top shadow, add a vertical offset and adjust other parameters accordingly. Also, set the propagation distance to 0 or more, and you will cover your horizontal border.

Start with this:

 box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49) 

If you do not get a full horizontal border, increase the fourth value a bit until it looks good. Adjust your vertical offset if necessary.

It would be helpful to see your html / css for the actual window.

Answer 2

There is a solution for this using an additional div, larger than the original, absolutely positioned. See a working example here: http://jsfiddle.net/martinschaer/MHs5R/

 <div class="container"> <div class="content"></div> <div class="shadow"></div> </div> 

And CSS:

 .container{ position: relative; background-color: #f0f0f0; padding: 20px; } .content{ height: 200px; width: 200px; background-color: #fff; } .shadow{ -webkit-box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49); box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49); position: absolute; top: 20px; /* .container top padding */ left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */ width: 215px; /* .content width + shadow spread */ height: 200px; }​ 

Answer 3

The box shadow parameters are in the following sequence:
horizontal offset, vertical offset, blur, shadow propagation distance, color value

I think you need this box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

Here is the fiddle - http://jsfiddle.net/ashwyn/Cbqej/1/

Answer 4

Result:

Demo at dabblet.com

CSS

 div { background-color: #FFF; border: 1px solid #888; width: 100px; height: 100px; box-shadow: 0px 10px 5px -2px #888 ; }