<div class="container">
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img1">
    <p>border-radius: 50%;</p>
  </div>
  <div>
    <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" id="img2">
    <p>clip-path: circle(50%);</p>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

body {
  background-color: #ddd;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.container div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
}

p{
  font-size: 20px;
  font-family: 'Courier Prime', monospace;
}

#img1 {
  border-radius: 50%;
}

#img2 {
  clip-path: circle(50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.