Creating smooth and round circles with css

Question

I'm stuck, trying to play around and improve my skills with css on the css battle web page. You can see the task here: https://cssbattle.dev/play/yR1YMEZEO78DGeVBxnAQ (just click close on the drop down that appears, saying: "Past daily targets", if it appears).

Below is the code on my attempt, and how far I got. I can't seem to get that curve smooth on my divs. Delete the entire code in the editor, and replace it with mine, to see my attempt.

<div class="outer-circel"><div class="inner-circel"></div></div>
<div class="line"></div>
<style>
  body {
    display: flex;
    background: #FFE4E0; 
    justify-content: center;    
  }     
  
  .outer-circel {    
    width: 300px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;    
    background: #E05947;
    border-radius: 100px 100px 0 0;
    transform: rotate(180deg);    
    margin: 100 0 0 0;    
    position: relative
  }

  .inner-circel {    
    width: 190px;      
    aspect-ratio: 1;
    background: #FFE4E0;
    border-radius: 50%;
    margin: 150 0 0 0;
    position: relative
  }  

  .line {
    width: 50px;
    height: 119px;   
    margin: 82 0 0 0;
    background: green;    
    position: absolute
  }
</style>

The code must be pasted exactly as it is now, to see the problem.

Answer 1

How about

border-radius: 150px 150px 0 0;