CSS Shadows all four sides of div

Question

I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers

ie a div containing content, with the shadows on every side. The top area will be

Answer 1

Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.

Answer 2

As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.

Answer 3

box-shadow: inset 0 0 3px 0 #000;

Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.

Answer 4

You can place the following code in the div in order to drop shadows on all four sides.

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);    

Answer 5

The answer posted by Sekar, needs a little editing,

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

this doesnot work on IE(I checked on IE8).