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;
}