How to remove the background image which is in between of border and jpg(see image)?

Question

If you see it closely there's a little blue line between the border and the profile image. How do I remove the little background colour/line(of the background image) between the border and the jpg?

here's my css code:

 .profile-pic{

  border-radius: 50%;

  position: relative;

  position: relative;

  top: -55px;

  border: 5px solid white;

Answer 1

This is due to how webpages render borders with antialiasing. The edge of the border has a slight transition to transparent to look smoother. The same thing is done to the image, so the result is a little bit of the background shows through.

Notice you can see a little bit of red around the image in this snippet.

body
{
padding: 50px;
background-color: red;
}

img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
}

<img src="https://placeimg.com/100/100/people"/>

In your example you can see this extra well because the blue line you mention is only around the part of the image that is over the blue section of the parent view. The bottom, which is over white, doesn't have the same effect.

You can fix this by putting whatever color you want as the background color of the image so when the antialiasing happens, your color shows through. I went with white to match the border color.

body
{
padding: 50px;
background-color: red;
}

img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
background: white;
}

<img src="https://placeimg.com/100/100/people"/>