putting a inset box shadow on an image or image within a div

Question

I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset

Answer 1

Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.

You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo