Rounded Semicircle with CSS - html

Question

I'm struggling to make the semicircle edges round, where can i fix my code?
.circle {
position: absolute;
width: 80px;
height: 50px;
background-color: transparent;
top: 70;
left: 20;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #fff58f;
border-top: 0;
}
<div class="circle"></div>

Answer 1

Only possible way to do this in pure CSS is by faking it with pseudo-elements:
.wrapper {
background: darkorange;
border-radius: 50%;
width: 200px;
height: 200px;
display: grid;
justify-content: center;
align-content: center;
}
.box {
background: orange;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 50px;
background-color: transparent;
bottom: 0;
left: -10px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before, .circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
}
.circle::before {
left: -20px;
top: -8px;
}
.circle::after {
right: -20px;
top: -8px;
}
<div class="wrapper">
<div class="box">
<div class="circle"></div>
</div>
</div>

Answer 2

Another possibility with css
I have used ::before and ::after pseudo elements for the rounded corner for the semi circle.
.parentcircle {
position: absolute;
background: #824b20;
width: 160px;
height: 160px;
border-radius: 50%;
padding: 30px;
}
.outercircle {
position: relative;
width: 100%;
height: 100%;
background: #e08027;
border-radius: 50%;
}
.circle {
position: relative;
width: calc(100% - 20px);
height: calc(50% - 10px);
background-color: transparent;
top: 50%;
left: -10px;
border-bottom-right-radius: 50% 100%;
border-bottom-left-radius: 50% 100%;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: -20px;
}
.circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: 100%;
}
<div class="parentcircle">
<div class="outercircle">
<div class="circle"></div>
</div>
</div>