Bootstrap Image Circle Inner Shadow

Question

How can I add an inner shadow to a bootstrap "image-circle"?

jsfiddle

This doesn't work..

.box-shad {
  box-shadow: 0 10px 20px #777 inset, 0 0 200px #000 inset, 0 0 150px #000 inset, 0 0 100px #000 inset;
}

<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">

Thanks for any ideas.

---

SOLUTION:

Put the box shadow on a circular div with background image set to the image, rather than using an image.

Answer 1

This works to me. Please try it.

.inner-shadow {
  box-shadow: inset 3px 3px 4px black;
  border-radius: 50%;
}
img {
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: -10;
}		

<div class="inner-shadow">
	<img src="http://placehold.it/300x300" alt="">
</div>