CSS边框的轮廓

Question

I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside. this is what I've accomplished so far:

 .roundedBorder { border: 1px solid #1EC865; border-width: 4px; border-radius: 81px; } .img { position:absolute; top:6px; left:6px; width:81px; } 

 <img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> <div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> </div> 

https://jsfiddle.net/dmL56kek/

now i'm looking to cover the outer of circle with a solid color.

PS: i don't want to apply any style on the image because it won't work in my case.

Answer 1

A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.

 .roundedBorder { border: 1px solid #1EC865; border-width: 4px; border-radius: 81px; } .img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;} 

 <img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> <div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> </div>