title: CSS: Rectangle side to round inside
body: <p>How can I create the rounded side (not corner) to round inside?
  I've thought about placing a white circle over it but then I figure there must be a cleaner way.</p>
  
  <p>I tried this but it round outwards:</p>
  
  <pre><code>.box {
      width: 30em; height: 10em;
      border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
      background: black;
  }
  </code></pre>
  
  <p>It should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zez7q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zez7q.jpg" alt="enter image description here"></a></p>