Making a smile/horseshoe/half circle with rounded edges in CSS

Question

I'm doing some CSS animations with a baby's animated face, and I'm trying to create the mouth as a specific smile shape. The shape I need looks like this. Take note of the top left and right edges, which are rounded:

You can see the closest I've gotten here. The only thing missing is the rounded top left and right edges.

.half-circle {
  height:150px;
  width: 75px;
  border-radius: 150px 0 0 150px;
  border-top: 20px solid #000;
  border-left: 20px solid #000;
  border-bottom: 20px solid #000;
  transform: translate(100px) rotate(-90deg);
}

<div class="half-circle"></div>

*Edit The submitted answers so far are not good enough so I unfortunately had to use a bitmap instead. If someone finds a better solution in the future, please provide an answer and I'll mark it as accepted if it works adequately.

Answer 1

Flink suggested adding circles in a comment so I tried it, and while not perfect it might be the best option. I edited the fiddle below with the circles. If someone has a better alternative or a way to do this better, then please let me know/post an answer:

JSFiddle

.half-circle {
    height:150px;
    width: 75px;
    border-radius: 150px 0 0 150px;
    border-top: 20px solid #000;
    border-left: 20px solid #000;
    border-bottom: 20px solid #000;
    transform: translate(100px) rotate(-90deg);
    position: relative;
}
.border-circle {
  background-color: #000;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
}
.left-circle {
  right: -8px;
  top: -20px;
}
.right-circle {
  bottom: -20px;
  right: -8px;
}

<div class="half-circle">
  <div class="border-circle left-circle"></div>
  <div class="border-circle right-circle"></div>
</div>

Answer 2

Here is an example:

.half-circle {
    height:150px;
    width: 75px;
    position: absolute;
    border-radius: 150px 0 0 150px;
    border-top: 20px solid #000;
    border-left: 20px solid #000;
    border-bottom: 20px solid #000;
    transform: translate(100px) rotate(-90deg);
}
.half-circle:before, .half-circle:after{
    content: "";
    width: 10px;
    height: 20px;
    position: absolute;
    left: 99%;
    top: -20px;
    background: #000;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.half-circle:after{
  bottom:-20px;
  top: inherit;
}

<div class="half-circle"></div>

JSFIDDLE LINK