html

<img src="./img/test.jpg" class="circle" alt="Cinque Terre">

css

.circle {
  width: 200px;
  height: 200px;
   /* 幅と高さの半分 */
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  background: #C00;
}

参考

[urlpreviewbox url=”https://iwb.jp/css-precise-circle-px-percent/”/]