Force image tag to be perfect circle

No, you need to wrap the image in a div, apply the rounding to that and hide any overflow.

Here I have also centered the image with flexbox but that's not a requirement.

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

<div class="circle">
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

<h2> Actual Image</h2>

  <img src="http://www.fillmurray.com/460/300" alt="">

Tags:

Html

Css

Related