title: border on bootstrap tabs content
body: <p>I want to add a border to my tab content.  There should be no border at the bottom of the selected tab. I found this questions: <a href="https://stackoverflow.com/questions/15316559/how-to-give-a-border-to-bootstrap-tab-contents">how to give a border to bootstrap tab contents</a>, but the answers didn't work for me?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul class="nav nav-tabs pull-right"&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#sub_cats_8"&gt;תתי קטגוריות&lt;/a&gt;&lt;/li&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#category_8"&gt;קטגוריה&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;div class="tab-content" style="height: 100%;"&gt;
      &lt;div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');"&gt;
          &lt;h1&gt; קוסמטיקה &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="sub_cats_8" class="tab-pane fade"&gt;
          &lt;ul class="sub_categories"&gt;
              &lt;li&gt;&lt;a href="products.php?act=scat&amp;id=11"&gt;איפור&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body, html {
      direction: rtl;
      height: 100%;
      font-family: Tahoma;
  }
  .nav-tabs {
      direction: ltr;
  }
  #logo {
      background-color: #005CB8;
      width: 100%;
      color: white;
      padding: 4% 10%;
      -webkit-box-shadow: 20px 10px 20px #003972;
      -moz-box-shadow: 20px 10px 20px #003972;
      box-shadow: 20px 10px 20px #003972;
      border-bottom-left-radius: 50px;
  }
  #logo h1, #logo h4 {
      display: inline;
      font-family: head;
  }
  #logo h1 {
      font-size: 550%;
  }
  #logo h4 {
      font-size: 220%;
  }
  .navbar-inverse {
      background-color: #477199;
      font-weight: bold;
  }
  .nav.navbar-nav.navbar-right li a {
      color: white;
  }
  .nav.navbar-nav li a {
      color: white;
  }
  .navbar-inverse .navbar-nav &gt; .active {
      background-color: #003972;
  }
  .navbar-inverse .navbar-nav &gt; .active &gt; a, .navbar-inverse .navbar-nav &gt; .active &gt; a:hover, .navbar-inverse .navbar-nav &gt; .active &gt; a:focus {
      color: white;
      background: #003972;
  }
  .navbar-inverse .navbar-nav &gt; li &gt; a:hover, .navbar-inverse .navbar-nav &gt; li &gt; a:focus {
      background-color: #324F6B;
      color: white;
  }
  .category {
      text-align: center;
      margin-top: 1px;
      background-size: 100% 100%;
      padding: 15% 0;
  }
  .category h1 {
      color: white;
      font-family: head;
      font-size: 500%;
      text-shadow: 2px -2px black;
  }
  .category_start {
      margin: 0 auto;
      width: 85%;
  }
  .sub_categories {
      -webkit-columns: auto 3;
      /* Chrome, Safari, Opera */
      -moz-columns: auto 3;
      /* Firefox */
      columns: auto 3;
      list-style-type: disc;
      margin-top: 5px;
  }
  .category_start .container {
      margin-top: 10px;
  }
  .product_image {
      height: 80px;
      width: 80px;
  }
  .products_sub_list {
      margin: 10px auto 0;
      text-align: center;
      max-width: 80%;
      border-radius: 7px;
  }
  .products_sub_list td {
      width: 15%;
      max-width: 15%;
      padding: 0 5px;
      border: 3px solid #46617A;
  }
  .product {
      width: 80%;
      border: 3px solid #46617A;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px;
  }
  .product_table td {
      border: 2px solid #46617A;
      padding: 13px;
  }
  .product_table {
      display: inline-table;
      margin-left: 15px;
      margin-bottom: 8px;
  }
  .product_table td:first-child {
      font-weight: bold;
  }
  .page {
      width: 85%;
      margin: 0 auto;
      padding: 15px 25px;
      border: 2px solid #46617A;
      border-radius: 10px;
      background-color: #C8D0D7;
  }
  .register {
      margin: 0 auto;
      width: 80%;
      text-align: center;
  }
  .register td {
      padding: 5px;
      text-align: right;
  }
  .register table {
      margin-right: 240px;
  }
  #register {
      width: 80%;
      position: absolute;
      z-index: 2;
      display: none;
      left: 0;
      right: 0;
      top: 100px;
      margin: 0 auto;
      border: 3px solid #0066FF;
      background-color: #CCE0FF;
      text-align:center;
      border-radius: 10px;
  }
  #bbg {
      display: none;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: black;
      opacity: 0.8;
      filter: alpha(opacity=80);
  }
  .tab-content {
      border: 1px solid #ddd;
      padding: 1px;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/ep2drocb/7/" rel="nofollow noreferrer">http://jsfiddle.net/ep2drocb/7/</a></p>
  
  <p>Notice there is border in the open tab, also the closed tabs have a double border.</p>