title: How do I create concave shaped borders around <div> elements?
body: <p>I am trying to make concave shaped top and bottom borders around a <code>&lt;div&gt;</code> like this:</p>
  
  <p><a href="https://i.stack.imgur.com/yhWUK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yhWUK.jpg" alt="Example of what I would like to do"></a></p>
  
  <p>My current CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.div:after {    
      content:'';
      position:absolute;
      left:-600%;
      width:1300%;
      padding-bottom:1300%;
      top:80%;
      background:none;
      border-radius:50%;
      box-shadow: 0px 0px 0px 20px #f2f2f2;
      z-index:-1;
  }
  </code></pre>
  
  <p>But it only works only on the bottom border and sometimes disappears on mobile devices.</p>
  
  <p>Here is <a href="http://jsfiddle.net/yefw4/728/" rel="nofollow noreferrer"><strong>JS Fiddle</strong></a>.</p>