Dlaczego rozmiar ramki: ramka nadal pokazuje granicę o szerokości 0 pikseli?

Używając rozmiaru ramki: ramki w CSS, zakładam, że całkowita szerokość elementu zostanie zdefiniowana w jego wartości „szerokości”. Jeśli więc powiem, że szerokość podziału wynosi 20 pikseli, a prawa granica 10 pikseli, otrzymam pudełko, które zajmuje przestrzeń 20 pikseli, a połowa to prawa granica. Przesuwając go do punktu, w którym ustawię szerokość na 10px i prawą ramkę, jak tutaj:

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

pole będzie składać się tylko z czerwonej ramki. Co powinno się stać, gdy ustawię szerokość na 0px? Myślałem, że sprawi to, że cała rzecz zniknie, ale nie, wynik jest dokładnie taki sam jak powyżej:jsFiddle

Moje pytanie brzmi, czy jest to oczekiwane zachowanie. Wydaje mi się niespójny. Chciałbym, aby pudełko zniknęło tylko manipulując szerokością / wysokością. Dzięki za każde wejście.

questionAnswers(2)

yourAnswerToTheQuestion