border-radius strange outline

user_11552399 0
Viewed 242

There is any solution to get rid of this outline from an image?

enter image description here

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>

View on JSFiddle

border css html
1 Answers

Don't using border solid for making something like this. You should radius the div class, and add padding. After that you make border-radius for the image too. This is only my personal option but i hope this helping..

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>

user_111570350
Related