Border-box confusion

Can someone please explain this question and answer to me?

My understanding is that border-box includes the padding and border values, therefore the total width would stay at 140px (and the content would become 80px, once you subtract 40px for padding and 20px for the border)?

So, for the div to be rendered at 200px, you’d need to use content-box value instead???

My understanding is the same - so far as I can tell this seems to be a bug. Have you reported it?

I replicated the code to check (see below).

As you say:

  • The div needs to use box-sizing: content-box for the div to be 200px wide.
  • The div is only 140px wide if box-sizing: border-box is used.