JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgcurly-hair-man.png">

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  --s: 280px;
  --b: 5px;
  --f: 1;
  --c: #C02942;

  width: var(--s);
  aspect-ratio: 1;

  padding-top: calc(var(--s)/5);
  border-radius: 0 0 999px 999px;

  --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
  --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
  outline: var(--b) solid var(--c);
  outline-offset: var(--_o);

  background:
    radial-gradient(circle closest-side,
      #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g);

  -webkit-mask:
    linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
    radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);

  cursor: pointer;
  transform: scale(var(--f));
  transition: .5s;
}

img:hover {
  --f: 1.35;
}