there is no shadow inside my div element

Question

ive got a div styled with the css properties:

border: 20px solid #000;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5);

the problem i have is, the shadow of the div is just outside, but not inside of the border.

ive allready tried to set the background to 100% opacity with background: rgba(0,0,0,0); but nothing changes.

I also tried to use inset but then the shadow is just inside.

what to do?

Answer 1

No reason to expect anything different. If you want an inner shadow, add a second one to the declaration that starts with the keyword inset.

E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);.

Note that elements that are descendants of the element with the box shadow will cover the inner shadow.

Also note that some older versions of modern browsers only support one shadow declaration at a time, but I think that set of browsers/versions is quite small.

Answer 2

Try something like this:

#mydiv { 
border: 1px red solid; 
box-shadow: 0 0 15px #555, inset 0 0 15px #555; 
width: 100px; height: 100px; 
}

Codepen