title: Adding a border around .nav-tabs doubles up top border for .active class
body: <p>I've done a lot of research and can't come up with an elegant solution to this issue. </p>
  
  <p>What I'd like is a border around my nav buttons so I do this: </p>
  
  <pre><code>.nav-tabs{border:1px solid #ddd;}
  </code></pre>
  
  <p>The problem is the active class appears to double up my top border (and my left border for the left-most tab). I try to undo it like this: </p>
  
  <pre><code>.nav-tabs &gt; li.active{border-top-style:none;}
  </code></pre>
  
  <p>This removes the top border but then adds a bottom border. </p>
  
  <p>I've seen the solutions for then setting the border bottom to the background color of the tab content while also maintaining a margin-bottom of -3px. But that is not working for me. </p>
  
  <p>How can I add a border around my nav buttons without the .active state doubling them up? </p>
  
  <p>Thanks for any helpful solutions. </p>
  
  <p>Here's a link to the fiddle: <a href="https://jsfiddle.net/43zzpvg2/" rel="nofollow">https://jsfiddle.net/43zzpvg2/</a></p>