Gap between background (or children) and rounded border

Question

Giving that code:

.avatar {
  font-size: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 2em;
  height: 2em;
  border: .15em solid red;
  border-radius: 50%;
  overflow: hidden;
}

.avatar>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="avatar">
  <img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>

resulting avatar have pixels of parent element between border and own background. They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.

And here in firefox:

I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.

I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.

Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.

You know how to repair this? Or where to find bug ticket for this?