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

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

Answer 3

By changing the 0 0 in border-radius, I was able to round the outer
sides of the half circle. I will edit if/when I figure out the
insides.
Note: I understand this isn't the full answer but it might get you on the right track.
.half-circle {
height:150px;
width: 75px;
border-radius: 150px 20px 20px 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>