Баг при применении css стиля border-radius

Question

Нашел много информации в интернете о баге в браузере chrome при применении свойства border-radius, но рабочего решения так пока и не нашел. Подскажите, как избавиться от вертикальных и горизонтальных линий по краям элемента. В примере я установил желтый цвет фона и белый цвет границы, чтобы четко был виден артефакт.

#circle-1 {
  background: url() center center no-repeat;
  background-size: 75%;
  height: 5em;
    width: 5em;
    margin-right: 0.5em;
    border-radius: 50%;
  border: 0.1em solid white;
}

html {background-color: yellow}

<img id="circle-1"></img>

Answer 1

Если вы хотите вставить картинку в блок как background, то используйте div, а не img и не будет никаких артефактов. Если все же нужен img, то лучше картинку вставлять как src.

Добавил примеры.

.circle {
  height: 5em;
  width: 5em;
  margin-right: 0.5em;
  border-radius: 50%;
  border: 0.1em solid black;
}

.image {
  background: url("https://via.placeholder.com/150/000000") center center no-repeat;
  background-size: cover;
}

<ul>
  <li>
    <h3>img круглый с фоном</h3>
    <img class="circle image">
  </li>

  <li>
    <h3>img круглый с src</h3>
    <img class="circle image" src="https://via.placeholder.com/150/000000">
  </li>

  <li>
    <h3>div круглый с фоном</h3>
    <div class="circle image"></div>
  </li>

</ul>

Answer 2

Спрятать некорректно выпирающие пиксели можно таким образом:
(1) Под дополнительный псевдоэлемент

#circle-1::after {
  content: '';  
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  display: block;
  border: solid 2px #FFF; // цвет бэкграунда
  border-radius: 50%;
  z-index: 3;
}

(2) Имитировать круг изображением
Для div можно имитировать обводку с помощью ::after в котором разместить background-image пустого круга (для контента), а снаружи будет фоновый цвет (имитация округления). Но при этом без использования border-radius: 50% / overflow: hidden;

Выглядит вот так: ibb.co/0s75WFc

БЛОГ НА HUSL

Баг при применении css стиля border-radius

Ответы (2 шт):