Hi

 

Does anyone know how to apply a box shadow around all 4 corners of the div?

 

I'm using

 

-moz-box-shadow:inset 5px 5px 10px #ccc;
-webkit-box-shadow:inset 5px 5px 10px #ccc;
box-shadow:inset 5px 5px 5px #ccc;

 

but it's only applying shadow to 2 sides.

css3.info/preview/box-shadow/

 

See Example F

Following code will create 4 side shadow

 

.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Full Source code...http://www.corelangs.com/css/box/shadow.html

 

bradny

or try a generator http://css3gen.com/box-shadow/

Box shadow:

box-shadow: 5px 5px 4px 3px red;

The first two parameters are your X and Y offset, so if you leave them at zero the shadow will spread out from all four corners. The second two are for the radius and blur radius of the shadow. You can add in multiple box shadows by comma separating them:

box shadow: 1px 1px 3px 3px red, 10px 4px 5px 0 blue;

Oh and don't forget your vendor prefixes (or even smarter us a tool such as auto prefix with grunt to do these for you

Edited May 11, 201412 yr by rbrtsmith

use this code for box shadow with rounded corner.

.input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}

Edited June 19, 201412 yr by Veeramanikandan