Странное поведение с проблемой CSS border-radius

Question

Я следую html с CSS

.image_with_loader_container {
  position: relative;
  width: 100%;
  padding-bottom: 139.34426%;
  background: #dbdbdb;
}

.image_with_loader_container img {
  border-radius: 4.75%/3.5%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="image_with_loader_container">
  <img src="..." />
</div>

На этом видео (Chrome 83) вы можете видеть, что радиус границы работает не очень хорошо. Вы можете проверить это поведение вживую на https://mtgprint.cardtrader.com/.

Есть идеи решить эту проблему?

Answer 1

Вы добавляете закругленные углы к изображению, но контейнер с background: #dbdbdb;по-прежнему прямоугольник. (Вы можете увидеть это лучше, если установите для вашего радиуса большое значение, например 100%). Попробуйте либо удалить этот фон, либо добавить тот же радиус границы к.image_with_loader_container.