title: Vertical tab border issue in CSS
body: <p>Here is my code. Always use <code>jsfiddlelink/show</code> link to get exact view.</p>
  
  <p><a href="http://jsfiddle.net/a5vm2vbo/2/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>This is the screenshot of the vertical tab using jquery
  <img src="https://i.stack.imgur.com/Y62kF.png" alt="enter image description here"></p>
  
  <p>Here, I used box-shadow  <code>box-shadow: 2px 2px 2px 1px #888888;</code>, so when the tab is active, I couldn't use <code>border-right: 3px solid white</code>. </p>
  
  <p>I need to join <strong>box shadow with the div</strong> like below</p>
  
  <p>My expected output will be like this..</p>
  
  <p><img src="https://i.stack.imgur.com/40Fvd.png" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function() {
        ons.bootstrap();
        $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .ui-tabs.ui-tabs-vertical {
     padding: 0;
     width: 42em;
     margin-left: 6%;
   }
   .ui-tabs.ui-tabs-vertical .ui-widget-header {
     border: none;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
     float: left;
     width: 10em;
     background: #F2F2F2;
     border-radius: 4px 0 0 4px;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
     clear: left;
     width: 100%;
     margin: 0.2em 0;
     border: none;
     border-width: 1px 0 1px 1px;
     border-radius: 0px;
     overflow: hidden;
     position: relative;
     right: -2px;
     z-index: 2;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
     display: block;
     width: 100%;
     padding: 0.6em 1em;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
     cursor: pointer;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
     margin-bottom: 0.2em;
     padding-bottom: 0;
     border-left: 4px solid #7fcc28;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
     margin-bottom: 10px;
   }
   .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
     float: left;
     width: 23em;
     border-left: none;
     border-radius: 0;
     position: relative;
     left: 10px;
     top: 7px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css"&gt;
  &lt;link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"&gt;
  &lt;script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://onsen.io/OnsenUI/build/js/onsenui.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;ons-navigator&gt;
    &lt;ons-page&gt;
  
      &lt;div style="min-height: 150px;"&gt;&lt;/div&gt;
      &lt;ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;"&gt;
        &lt;ons-row&gt;
          &lt;div id="tabs" style="background-color: #F2F2F2;"&gt;
  
            &lt;ul&gt;
              &lt;li style="box-shadow: 2px 2px 2px 1px #888888;"&gt;
                &lt;a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;"&gt;Vertical Tab 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li style="box-shadow: 2px 2px 2px 1px #888888;"&gt;
                &lt;a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;"&gt;Vertical Tab 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li style="box-shadow: 2px 2px 2px 1px #888888;"&gt;
                &lt;a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;"&gt;Vertical Tab 3&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
  
            &lt;div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;"&gt;
              something writes here 1
            &lt;/div&gt;
            &lt;div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;"&gt;
              something writes here 2
            &lt;/div&gt;
            &lt;div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;"&gt;
              something writes here 3
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/ons-row&gt;
      &lt;/ons-list-item&gt;
    &lt;/ons-page&gt;
  &lt;/ons-navigator&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I am having this in CSS</p>
  
  <pre><code>*, *:before, *:after {
      box-sizing: border-box;
  </code></pre>
  
  <p>I used <code>box-sizing: none !important</code> in <code>#a,#b,#c</code> CSS Style, but it is not worked!</p>