<img src="https://picsum.photos/id/25/300/300" alt="The nature">
<img src="https://picsum.photos/id/54/300/300" alt="The nature" style="outline-color: #D1F2A5">
img {
  --s: 300px; /* size of the image*/
  
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: calc(-.14*var(--s));
  outline: var(--s) solid #FFC48C;
  outline-offset: calc(var(--s)/-2);
  clip-path: inset(14.65% round 20px);
  transition: .7s;
  cursor: pointer;
}
img:hover {
  outline-offset: 0;
}



body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 50px;
  background: #547980;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.