CODEWITHSUNDEEP
htmlcss
Abd
Abd

Reputation: 175

How to remove gap between image and its border?

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%3D&w=1000&q=80" />

Upvotes: 0

Views: 130

Answers (2)

Anonymous
Anonymous

Reputation: 557

add the image background color same as border color

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

Upvotes: 2

r3mainer
r3mainer

Reputation: 24547

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%3D&w=1000&q=80" />

Upvotes: 2

Related Questions