border-box vs content-box

border-box and content-box are two values of the box-sizing property.
Unlike the content-box, the border-box value indicates that the dimension of an element will also include the border and padding.

Let's assume that we have a div element whose size is 200px x 100px, the border and padding are 5px and 10px respectively.

.div {
width: 200px;
border: 5px;
padding: 10px;
}

In the content box model, the content inside of element will have the same dimension as the element.

.div {
/* ... */
box-sizing: content-box;
}
// Content box               
◀︎──── 200px ────▶︎

┌───────────────────────────────────────────────────────┐
| |
| ┌───────────────────────────────────────┐ |
| | | |
| | ┌───────────────┐ | |
| Border| Padding | Content | | |
| | | | | |
| 5px | 10px | 200px | 10px | 5px |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
| | | | | |
| | └───────────────┘ | |
| | | |
| └───────────────────────────────────────┘ |
| |
└───────────────────────────────────────────────────────┘

In the border box model, the content's dimension has to subtract the border and padding from the element's dimension.
Specifically, the content's width is 200 - 5 * 2 - 10 * 2 = 170px.

// Border box
◀︎──────────────────────── 200px ────────────────────────▶︎

┌───────────────────────────────────────────────────────┐
| |
| ┌───────────────────────────────────────┐ |
| | | |
| | ┌───────────────┐ | |
| Border| Padding | Content | | |
| | | | | |
| 5px | 10px | 170px | 10px | 5px |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
| | | | | |
| | └───────────────┘ | |
| | | |
| └───────────────────────────────────────┘ |
| |
└───────────────────────────────────────────────────────┘

More