La propiedad box-sizing nos permite modificar como se va a calcular el ancho y el alto de un elemento. Posee solo dos propiedades posibles:

content-box

Es la forma de calcular por defecto el tamaño en CSS. El ancho y alto de un elemento se calculará pero no se tendrá en cuenta el margin, border o padding. Por ejemplo: tenemos un div de 350px de width, si le damos content-box y agregamos un border de 10px tendremos un div con un width de 370px (porque 350 + 20 ya que se agregan 10 del lado izquierdo y 10 del lado derecho)

Todo el elemento se agrandó para que pueda entrar el nuevo border.

ATENTI

Cuando utilizamos herramientas de position como absolute o relative, es conveniente declarar content-box para no alterar el tamaño de los elementos.

border-box

Con border-box el ancho y el alto de un elemento tendrá en cuenta el border y el padding, haciendolo mas entendible. Por ejemplo: tenemos un div de 350px de width, si le damos border-box y agregamos un border de 10px tendremos un div con un width de 350px (ya que el width no se modificará y el border se creará restandole espacio al contenido de la caja.

Se ve una caja mas chica ya que esta si respeta los 350px de width que le dimos.

ATENTI

Al respetar a rajatabla las medidas que nosotros le damos, border-box es util para poder diseñar la estructura de un sitio web.