Skip to content
Box model

box-sizing

Controls whether declared width and height include padding and border.

31 effects in the catalog use this property.

Syntax

box-sizing: content-box | border-box;

Watch out

With `border-box`, `width: 200px` means 200px including padding and borders. This makes layout calculations far more predictable, so most projects enable it globally.

Effects using box-sizing

These are working effects from the catalog. Open a tile to inspect the full source.