How to prevent background color of an image to show through at rounded corners?-CodePudding

I have an image element nested in a parent div. The parent has rounded corners and the image should adapt those. In case that the image doesn't load for some reason, a default background color should show. This is the general setup:

.parent {
  border-radius: 10px;
  overflow: hidden;
}

.child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: red;
}

<div class="parent">
  <img src="https://via.placeholder.com/150" class="child" />
</div>

I would expect the image to fill the entire container and not let any red color from the background show through, however the corners look like this:

As you can see, there is a thin red line visible at the rounded corners. This happens in Chrome and Firefox. How do I get rid of that and make the image properly fill the corners?

CodePudding user response：

Bummer. You could transform: scale(1.05) as a way around it. Or put the image in the background of the parent. : /