box-shadow being cut off

Question

While using CSS3's box-shadow I am having an issue I do not usually have.

The box shadow usually just bleeds over the div edges, but not on this one.

box-shadow that is being cut off on the top and right hand side..

Heres the css I'm using for box-shadow:

-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
 box-shadow: 0 0 5px #555;

Cheers

Answer 1

The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.

Answer 2

If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.

Answer 3

use padding + negative margin like:

.img {
  padding: 10px;
  margin: -10px;
}

Answer 4

I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.

For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.

outline: 10px solid transparent;