I am currently facing an issue where a small 1px red border appears when I set border radius and overflow:hidden. My goal is to completely eliminate the red border around the image. I have experimented with various CSS properties like isolation, border-collapse, and masking, but none of them provide the desired result. It seems that adding explicit height and width to my container achieves the effect I want, but in my current situation, the dimensions are fluid.
.wrapper {
margin: 100px;
}
.container {
background: red;
border-radius: 50%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
background: #f2f2f2;
}<div class="wrapper">
<div class="container">
<img src="https://www.freepnglogos.com/uploads/eagle-png/bald-eagle-png-transparent-image-pngpix-7.png" />
</div>
</div>