Как нарисовать на CSS плавный изгиб?

:root { 
  --size: 16.875rem; 
} 
 
.block { 
  position: relative; 
  width: var(--size); 
  height: var(--size); 
  background-color: lightgray; 
  border-radius: 1rem 1rem 0 0; 
} 
 
.block::before, 
.block::after { 
  content: ''; 
  position: absolute; 
  bottom: -1rem; 
  width: 5.2rem; 
  height: 1.5rem; 
  background-color: inherit; 
  z-index: -1; 
} 
 
.block::before { 
  left: 0; 
  border-radius: 0 0 100% 0; 
} 
 
.block::after { 
  right: 0; 
  border-radius: 0 0 0 100%; 
} 
 
.ellipse { 
  position: absolute; 
  bottom: -3rem; 
  left: 50%; 
  width: 8em; 
  height: 4rem; 
  border-radius: 50%; 
  background-color: white; 
  transform: translateX(-50%); 
}

<div class="block"> 
  <div class="ellipse"></div> 
</div>