title: Custom styles for bootstrap tabs
body: <p>I am trying to change default bootstrap tab styles. So my custom style should be similar to this image's styles.</p>
  <p><img src="https://i.stack.imgur.com/e1Wyk.png" alt="enter image description here" /></p>
  <p>I tried it like this, but it's not working. The main thing doesn't skew the bottom of each tabs.</p>
  <pre><code>.content .nav-tabs {
    background: #dd5b5b;
    padding: 15px 0 0 0;
  }
  .content .nav-tabs &gt; li &gt; a {
    padding: 5px 40px;
    background: #eaedf2;
    border: 1px solid #a48686;
    border-bottom: none;
    border-top-right-radius: 2em;
    border-top-left-radius: 1.5em;
  }
  </code></pre>
  <p><a href="http://jsbin.com/zayijoto/1/edit?html,css" rel="nofollow noreferrer">JS BIN</a> with the code so far</p>
  <p>Can anybody help me to get the output like the above image using pure css?</p>
  <p>Thank you.</p>