title: Hiding border behind transparent tabs
body: <p>I am experimenting with a tab script that will display different information depending on which tab you hover over.  I am trying to do this with a transparent background color on the tabs and the main content window. The right border for the tabs is hidden which is fine, but the border for the main content can be seen through the transparent background.  I want the graphic to flow from the tab over to the content but I cannot figure out how to hide the border JUST in the places to the right of the ACTIVE tab.  I have created a JSFiddle page to give a visual.</p>
  
  <p><a href="http://jsfiddle.net/tA8AS/" rel="nofollow">Tab Example - via JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="vtab"&gt;
                  &lt;ul&gt;
                      &lt;li class="home selected"&gt;&lt;/li&gt;
                      &lt;li class="login"&gt;&lt;/li&gt;
                      &lt;li class="support"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div&gt;
                     &lt;h1&gt;Profile 1&lt;/h1&gt;
                     &lt;p&gt;This is where profile 1 will go&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;h1&gt;Profile 2&lt;/h1&gt;
                     &lt;p&gt;This is where profile 2 will go&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                     &lt;h1&gt;Profile 3&lt;/h1&gt;
                     &lt;p&gt;This is where profile 3 will go&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
          background: black;
          font-family: verdana;
          padding-top: 50px;
          color: white;
      }
      #vtab {
          margin: auto;
          width: 900px;
          height: 100%;
  
      }
      #vtab &gt; ul &gt; li {
          width: 440px;
          height: 90px;
          background-color: rgba(23,23,23,.5) !important;
          list-style-type: none;
          display: block;
          text-align: center;
          margin: auto;
          padding-bottom: 10px;
          border: 2px solid #a9a9a9;
          border-radius: 15px 0 0 15px;
          border-collapse: collapse;
          position: relative;
          border-right: none;
          opacity: .3;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);             
      }
  
      #vtab &gt; ul &gt; li.selected {
          opacity: 1;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
          border: 2px solid #a9a9a9;
          border-right: none;
          z-index: 10;
          background-color: rgba(23,23,23,.5) !important;
          position: relative;
      }
      #vtab &gt; ul {
          float: left;
          width: 440px;
          text-align: left;
          display: block;
          margin: auto 0;
          padding: 0;
          position: relative;
          top: 80px;
      }
      #vtab &gt; div {
          background-color: rgba(23,23,23,.5);
          margin-left: 440px;
          border: 2px solid #a9a9a9;
          min-height: 500px;
          padding: 12px;
          position: relative;
          z-index: 9;
          -moz-border-radius: 20px; 
      }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function() {
          var $items = $('#vtab&gt;ul&gt;li');
          $items.mouseover(function() {
              $items.removeClass('selected');
              $(this).addClass('selected');
  
              var index = $items.index($(this));
              $('#vtab&gt;div').hide().eq(index).show();
          }).eq(1).mouseover();
      });
  </code></pre>