CSS: How to put an image in a circle in which the bottom crop, but the top pops up?

Question

I have a parent div, which is a circle made in CSS, and the child has a headshot image. I'm trying to make my head align in a circle below, but the head extends from the top of the circle, like

The circle also has a border similar to an example.

I try my best to fit the shape of the circle. I tried using clip-path(I tried it in a circle, ellipse and svg mask), which masks the image to give an illusion, but I'm not sure if this is the right track and it matches the edges of the circle are quite complex. Any ideas would be appreciated.

Answer 1

SPAN.

,
- . background...

.circle-face{
  display: inline-block;
  border: 4px solid #00B9D1;
  border-radius: 50%;
  width: 140px; 
  height: 140px;
  margin-top: 30px;                /* 30px forehead space */
}
.circle-face > *{
  display: inline-block;
  width: 140px;
  height: 170px;                   /* by 30px higher */
  margin-top: -30px;               /* and offset by 30px */
  background: none no-repeat center bottom / 170px;
  border-radius: 0 0 70px 70px;    /* 70 + 70 = 140px width */
  /* box-shadow: 0 0 0 4px red;    /* UNCOMMENT TO SEE THE TRICK */
}

<span class="circle-face">
  <span style="background-image:url(https://i.stack.imgur.com/bdZeE.png);"></span>
<span>

Hide result