malek yahyaoui malek yahyaoui - 3 months ago 11
CSS Question

outline of border in css

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

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>