Alternative CSS Box Model

To turn on the alternative model for an element,
set box-sizing: border-box on it:

.box {
  box-sizing: border-box;
}
Copy

To use the alternative box model for all of your elements (which is a common choice among developers)

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
Copy

Border box
Using the alternative box model
the size of the border makes the content box smaller as it takes up some of that available width and height.