why is there a gap between image and it's border and how can I remove it?

img {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: solid #2ba272 3px;
}

body{
background-color:#f91880;
}

<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXw3NjA4Mjc3NHx8ZW58MHx8fHw=&w=1000&q=80" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I think the problem is caused by antialiasing at pixels that include the image and its border. The background colour is showing through for no good reason.

You can fix this by setting the background colour of your image to be the same as the border colour:

img {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: solid #2ba272 3px;
  background-color:#2ba272;   /* <<< add this line <<< */
}

body{
  background-color:#f91880;
}

<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXw3NjA4Mjc3NHx8ZW58MHx8fHw=&w=1000&q=80" />

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

add the image background color same as border color

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: solid #2ba272 1px;
    background: #2ba272;
}