Create a smile / horseshoe / rounded semicircle in CSS

Question

I do some CSS animations with the animated face of a child, and I'm trying to create a mouth as a special form of smile. I need a form. Pay attention to the upper left and right edges, which are rounded:

You can see the closest I got here. The only thing missing is the rounded upper 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 answers provided are not good enough so far, so unfortunately I had to use a bitmap. If someone finds a better solution in the future, provide an answer, and I mark it as accepted if it will work adequately.

Answer 1

Flink suggested adding circles to the comment, so I tried it, and although it is not perfect, this might be the best option. I edited the violin below in circles. If anyone has a better alternative or a way to do it better, then please let me know / send 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 0 0 to border-radius , I was able to get around the outside of the semicircle. I will edit if / when I find out the Insides.

Note I understand that this is not a complete answer, but it can help 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>