Why does box-sizing: border-box still show the border with a width of 0px? [duplicate]

Question

When using box-sizing: border-box in CSS, I assume that the total width of an element will be defined in its "width" 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:

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

<div id="box"></div>

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:

#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;
}

<div id="box-1"></div>
<div id="box-2"></div>

View on jsFiddle

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.

Adjudication

What browser are you using? Not all browsers support box-sizing directly. Some have their own proprietary box-sizing such as -moz-box-sizing and -webkit-box-sizing. If you want to make something disappear consider using display:none; or visibility:hidden; – Parotid

I could also use a hammer to break an egg... but I'm trying not to :) Just kidding, I really need the element to disappear like that...think of a slit... – Adjudication

You mean some sort of animation where you slowly decrease the width to nothing? Not exactly sure what you mean by a slit. If you could elaborate on exactly what you are trying to achieve there maybe another more appropriate solution. As with most things there are many ways to do it. Perhaps a claw hammer is a poor choice but maybe a ripping hammer is right up your alley. – Parotid

Answer 1

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.

Stull

Thank you for the answer; the key was in understanding that the border stays because of the negative result, I guess. But, in your opinion, do you think that it is a consistent behavior? I wonder because in this last case, border-box and content-box behave the same which seems just so counter-intuitive to me. What do you think? – Adjudication

I agree, the problem is that you can't allow negative sized blocks, so this is how they decided to deal with it. I can't think of a better alternative. – Stull

so with border-box we not really setting size of border+padding+content, we still setting size of just content, but telling browser to absorb border and padding into content. heh. – Jordanjordana

Answer 2

Take a look at this screenshot:

The entire box is 100x100px as you would expect, but the actual width is 90px + 10px right border. So when you set the width to 0, the width is still 0 (can't have negative width), but you still have the 10px border.

Faxun

But why do you still have the border? Because after the specs it should not be there: "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. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0." see border-box – Adjudication

That's what is going on. The content width (width not including borders or padding) is 0 because, after subtracting borders and padding, you're left with a negative width. The thing to note is how you define "content". – Faxun

...so the total 'width' of the element should be floored to 0, right? If by defining width: 10px and border-right: 10px, I get a box of 10px, I should get a box of 0px if I define the width to 0px, correct? Re-quoting Paul Irish: "Ugh. If I say the width is 200px [0px], gosh darn it, it's gonna be a 200px [0px] wide box even if I have 20px of padding [border]." * { box-sizing: border-box } FTW – Adjudication

No, the "content width" will be 0. The total width is content + padding + border. – Faxun

No, it's not, I'm using box-sizing: border-box. Please read about the property. – Adjudication