Remove border around circular image

The problem is not the image. The image is transparent and has no background at all. The problem is caused by adding background: whiteand border-radius: 50%to the image element. This is due to antialiased pixels in browsers and is the same problem described in this thread .

The solution is to use some method to partially fill the background onto the element, but not completely (ie, until enough to cover the black circle that is already on the image). Since imgmarkup cannot contain pseudo-elements (at least it doesn't work cross-browser), your best bet is to use a radial-gradientas a background, as shown in the code snippet below.

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

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>