Geek Answers Handbook

Delete border around circular image

I have a round image (.png file) that is transparent in the middle. I need to make the background inside the image solid color. To do this, I made the background solid and then laid it down border-radius:50%, but this creates an ugly little white line. Is there a way to get rid of this, or will I have to manually color the image in the 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>
Run codeHide result

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

+4
source share
2 answers

. . background: white border-radius: 50% . , .

, , , ( , , ). img ( , -), radial-gradient , .

. - .

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>
Hide result
+6

.

div, (, 1px ), , , , .

, , . .

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>
Hide result
+1

More articles:


All Articles