You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle

Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle

You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle

The full property list is:

box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?

But even better, read through the spec.

Just use the below code. It will shadow surround the entire DIV

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

Hope this will work

The CSS code would be:

box-shadow: 0 0 10px 5px white;

That will shadow the entire DIV no matter its shape!

Use this below code

 border:2px soild #eee;


margin: 15px 15px;
-webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;

Explanation:-

box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.

box-shadow : inset/outset h-offset v-offset blur spread color;

Explanation of the values...

inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.

h-offset -- the horizontal offset of the shadow (required value)

v-offset -- the vertical offset of the shadow (required value)

blur -- as it says, the blur of the shadow

spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.

color -- as it says, the color of the shadow

Usage

box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px

Try following code:

.shodow0
{
box-shadow: 10px 10px 5px lightblue;
}
.shodow1
{
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
}
.shodow2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}


.shodow3  {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}


.shodow4
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.shodow5
{
width: 100px;
height: 100px;
margin: 15px 0;
background: #ccc;


/* Box Shadow */
/* Opera */
-o-box-shadow: 5px 5px 5px #666;
/* IE */
-ms-box-shadow: 5px 5px 5px #666;
/* Mozilla FireFox */
-moz-box-shadow: 5px 5px 5px #666;
/* Google Chrome */
-webkit-box-shadow: 5px 5px 5px #666;
/* Normal */
box-shadow: 5px 5px 5px #666;
}

<div class="shodow0">
This a text or DIV text
</div>
<div class="shodow1">
This a text or DIV text
</div>
<div class="shodow2">
This a text or DIV text
</div>
<div class="shodow3">
This a text or DIV text
</div>
<div class="shodow4">
This a text or DIV text
</div>
<div class="shodow5">
This a text or DIV text
</div>