Remove border around circular image

Question

I have a round image (a .png file) which is transparent in the middle. I need to make the background inside the image a solid color. To do this, I made the background solid, and then put border-radius:50%, but this creates an ugly small white line. Is there anyway to get rid of this, or would I have to manually color the image in an image editor?

div {
  width: 500px;
  height: 500px;
  background: black;
}
div img {
  margin: 100px;
  max-width: 50%;
  background: white;
  border-radius: 50%;
}

<div>
  <img src="http://i.imgur.com/sDU7Lhz.png">
</div>

Fiddle here: https://jsfiddle.net/h3nwkoe1/

The problem is with your .png file which has those ugly white lines. — ReshaD, Mar 30 '16 at 14:15
The problem is not with the image at all. The image has a transparent background. It is the `background: white` and the `border-radius: 50%` that is causing the bleed. This is a known issue. @JohnDoe: Is [this](https://jsfiddle.net/h3nwkoe1/4/) what you need? The green border is just for demo and can be removed. — Harry, Mar 30 '16 at 14:25

score 6 · Accepted Answer · edited May 23 '17 at 10:32

The problem is not with the image. The image is a transparent one and has no background to it at all. The problem is caused by the background: white and the border-radius: 50% added to the image element. It is due to the anti-aliasing pixel in browsers and is the same issue described in this thread.

The solution would be to use some method to fill the background partially to the element and not fully (that is, just enough to cover till the black circle that is already present on the image). Since the img tag cannot have pseudo-elements (atleast it won't work cross-browser), the best option is to use a radial-gradient for the background like in the below snippet.

Note: The thick green border is only for demo and can be removed without any side effect.

div {
  width: 500px;
  height: 500px;
  background: black;
}
div img {
  margin: 100px;
  max-width: 50%;
  background: radial-gradient(circle at center, white 60%, transparent 61%);
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid green;
}

<div>
  <img src="http://i.imgur.com/sDU7Lhz.png">
</div>

Exactly what i needed. Thanks a lot! – JohnDoe Mar 30 '16 at 14:50 — JohnDoe, Mar 30 '16 at 14:50
You're welcome @JohnDoe. Glad to know that it helped :) – Harry Mar 30 '16 at 14:51 — Harry, Mar 30 '16 at 14:51

Eria · Answer 2 · 2016-03-30T14:54:11.303

I totally agree with Harry's explanation.

Another workaround could be to enclose the image in a div slightly smaller than the image (like 1px on each side), so that the circle formed using border-radius is smaller than the external black circle on the image.

It is a bit messier than the solution proposed by Harry. But it could be an alternative to gradient.

div#black {
  width:500px;
  height:500px;
  background:black;
  border: solid black 1px;
  box-sizing: border-box;
}

div#circle {
  margin: 100px;
  width: 250px;
  height: 250px;
  background: white;
  border-radius: 50%;
  text-align: center;
}

div#circle img {
  width: 252px;
  height: 252px;
  margin-left: -1px;
  margin-top: -1px;
}

<div id="black">
  <div id="circle">
    <img src="http://i.imgur.com/sDU7Lhz.png">
  </div>
</div>

Remove border around circular image

2 Answers2

Linked