Multiple borders, with padding, around image

Question

I want to create multiple border, with some padding, around my image like shown below. I prefer to do this with CSS only, but I don't know if this is possible.

While I googled for this I only found examples like this with multiple borders directly around the object using box shadow.

I tried creating this just using a border and padding around the image. But the padding didn't even worked out and with box-shadow like in the example above I won't get something like I want.

How would you guys handle this problem, and is it even possible?

Edit: Sorry, forget to show what I've currently have: code pen link

Answer 1

Easy peasy!

Padding, border and couple of box-shadows will do the trick.

img {    
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 0 0 7px #fff, 
                0 0 0 8px #ddd;
}

Fiddle