Round photos with outline-offset on mobile devices

Question

I'm stumped and need some help. I have CSS written to make photos round with a thin 1px outline set to offset -12px and appear inside the photo. This works fine for desktop devices, but the outline radius does not carry over the border-radius: 50% on mobile devices. Any suggestions on what I am doing wrong or how to fix.

 .round-photo { width:400px; height:400px; margin: auto; }.round-photo img { width:100%; height:inherit; border-radius: 50%;important: outline; solid 1px white: outline-offset; -12px; }

 <div class="round-photo"> <img src="https://placeimg.com/640/480/people"> </div>

Here is what I am trying to get my photos to look like when viewing on mobile devices. Where the outline-offset appears inside the image and retains the 50% radius - forming a complete circle inside the photo.

However this is what my image looks like in Brave/Chrome on an Apple iPhone 8

And this is what my image looks like in Duck Duck Go on an Apple iPhone 8

And here is what my image looks like in Safari on an Apple iPhone 8

Answer 1

You can try something like this. Have created a codepen. let me know if this works for you?

https://codepen.io/_makki/pen/JjOYJgL

.round-photo {
    width: 400px;
    height: 400px;
    margin: auto;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}
.round-photo:after {
    content: "";
    position: absolute;
    border: 1px solid white;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
}
.round-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}