CSS

* box-sizing border-box

*{
box-sizing: border-box;
}

box sizing border box

*{
 box-sizing: border-box;
 }

what happens when the width is 0 and there is a border and box-sizing is set to border-box?

The content area is anything left after you subtract the width of the border.

    | The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Specified width = 10 px
border width = 10 px
Content width = Specified width (10 px) - border width (10 px)
Content width 10 - 10 = 0

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

    | As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.