css chainging box model

when width is 100, pending and border thickness is add to original width. so make it wider.
In the default box model, box dimensions are affected by border thickness and padding.

box-sizing will automatically adjust size. e.g.   box-sizing: border-box;
The box-sizing property controls the box model used by the browser.

with any setting, it will keep the content's box size
The default value of the box-sizing property is content-box.

border-box will keep the entire boxes' size
The value for the new box model is border-box.

its only for content size, not border
The border-box model is not affected by border thickness or padding.