странный контур радиуса границы

Question

Есть какое-нибудь решение избавиться от этого контура с картинки?

body {
  background: #000
}

.s {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 8px solid #FFF;
  overflow: hidden
}

.s img {
  width: 100%
}

<div class="s">
  <img src="https://i.imgur.com/v9f1nS2.jpg" />
</div>

Посмотреть на JSFiddle

Answer 1

Не используйте рамку solid для создания чего-то подобного. Вы должны добавить радиус в класс div и добавить отступы. После этого вы также делаете border-radius для изображения. Это только мой личный выбор, но я надеюсь, что это поможет ..

body {
	background:#000
}
.s {
	width:200px;
	height:200px;
	border-radius:50%;
	overflow:hidden;
  padding:20px;
  background:#fff;
}
.s img {
	width:100%;
  border-radius:50%;
}

<div class="s">
	<img src="https://i.imgur.com/v9f1nS2.jpg"/>
</div>