title: Why does box-sizing: border-box still show the border with a width of 0px?
body: <p>When using <code>box-sizing: border-box</code> in CSS, I assume that the total width of an element will be defined in its &quot;width&quot; value. So if I say that the width of a division is 20px and the right border is 10px, I will end up with a box that takes up the space of 20px and half of it is the right border. Pushing it to the point where I set the width to 10px and the right border, too, like here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 50px;
    background: black;
    border-right: 10px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The box will only consist of the red border. What should happen, when I set the width to 0px? I thought it would make the whole thing disappear, but no, the result is exactly the same like the one above:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box-1 {
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 50px;
    margin-bottom: 10px;
    background: black;
    border-right: 10px solid red;
  }
  
  #box-2 {
    overflow: hidden;
    width: 0px;
    box-sizing: border-box;
    height: 50px;
    background: black;
    border-right: 10px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box-1"&gt;&lt;/div&gt;
  &lt;div id="box-2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/YVxgK/5/" rel="nofollow noreferrer">View on jsFiddle</a></p>
  <p>My question is if this is the expected behavior. Seems inconsistent to me.  I would like to make a box disappear only manipulating the width/height.</p>