title: Curve on the top/bottom of a div or element
body: <p>I am looking to achieve as shown:
  <a href="https://i.stack.imgur.com/YxNZ5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YxNZ5.jpg" alt="Curve on top of a div"></a></p>
  
  <p>I have tried border-radius on a pseudo element but the curve is ugly and smoothly as opposed to ending 'abruptly' with sharp corners - if you know what I mean.</p>
  
  <p>The same div needs the same curve on the bottom, but inverted version of the one in image.
  Also, considering an image:
  <a href="https://i.stack.imgur.com/LIBKC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIBKC.jpg" alt="Similar curve on top and bottom"></a></p>
  
  <p>How would I achieve this in CSS?</p>