title: CSS Border not showing up
body: <p><a href="http://jsfiddle.net/vcXe6/9/" rel="nofollow">Here's the fiddle</a></p>
  
  <p>I'm trying to set the first <code>&lt;li&gt;</code> to have a border that overlaps the neighboring element's border - this will be used to hide a section of the border when a corresponding menu item is currently selected (by displaying a white border that overlaps the dark one).  </p>
  
  <p>CSS:</p>
  
  <pre><code>.side-study-box .side-box-menu .nav-selected {
      /* Works, but I need it to overlap the black border on the right */
      border-right: 2px red inset;
      /* Does not show the border because it's hidden */
      border-right: 2px red; /* Works */
      z-index: 101;
  }
  </code></pre>
  
  <p>Here's my code: </p>
  
  <pre><code>&lt;div class="viewport"&gt;
      &lt;ul&gt;
          &lt;li&gt; &lt;a class="side-box-menu-control nav-text" data-bind="css: { 'nav-selected': true }"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a class="side-box-menu-control nav-picture"&gt;&lt;i class="icon-picture"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a class="side-box-menu-control nav-video"&gt;&lt;i class="icon-facetime-video"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>