title: How to make Inverted curve or border-radius for div
body: <p>I have been working on one project in which i have to style a border of a div inverted to achieve this i can only use css and js i cannot use any plugins.
  I have gone through several online posts and similar looking questions on stack but couldnt really find what i want , I am attaching a <a href="https://i.stack.imgur.com/8WGMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WGMa.png" alt="Image"></a> for reference as well as a <a href="http://jsfiddle.net/7fsc0orL/" rel="nofollow noreferrer">fiddle</a> of what i have tried so far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    overflow: hidden;
  }
  .inner {
    border: 1px solid #888;
  }
  .inner i {
    width: 40px;
    height: 40px;
    border: 1px solid #888;
    border-radius: 50%;
    background-color: #fff;
  }
  .inner .top {
    margin-top: -20px;
  }
  .inner .bottom {
    margin-top: -20px;
    margin-bottom: -22px;
  }
  .inner .left {
    float: left;
    margin-left: -20px;
  }
  .inner .right {
    float: right;
    margin-right: -20px;
  }
  .content {
    min-height: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;
      &lt;i class="top left"&gt;&lt;/i&gt;
      &lt;i class="top right"&gt;&lt;/i&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;i class="bottom right"&gt;&lt;/i&gt;
      &lt;i class="bottom left"&gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>