Por que o box-sizing: border-box ainda mostra a borda com uma largura de 0px?

Ao usar box-sizing: border-box em CSS, suponho que a largura total de um elemento será definida em seu valor "width". Então, se eu disser que a largura de uma divisão é 20px e a borda direita é 10px, vou acabar com uma caixa que ocupa o espaço de 20px e metade dela é a borda direita. Empurrando até o ponto em que eu configurei a largura para 10px e a borda direita também, como aqui:

#box{
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 100px;
    background: black;
    border-right: 10px solid red;
}​

a caixa consistirá apenas na borda vermelha. O que deve acontecer quando eu definir a largura para 0px? Eu pensei que faria a coisa toda desaparecer, mas não, o resultado é exatamente o mesmo como o acima:jsFiddle

Minha pergunta é se esse é o comportamento esperado. Parece inconsistente para mim. Eu gostaria de fazer uma caixa desaparecer apenas manipulando a largura / altura. Obrigado por qualquer entrada.

questionAnswers(2)

yourAnswerToTheQuestion