CSS · Professional Development

What is CSS box-sizing: border-box?

After you start developing for the web a little bit, you’ll certainly run across the following CSS:

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

In fact, this is considered by some to be best practice, and would be included at the top of their CSS file in every project.

So what is it? border-box is one of three (3) options for the box-sizing property, which was introduced with CSS3. The default value for box-sizing is content-box and there is the rarely used padding-box as well as border-box. If you’ve done any web development you know content’s rendered width is the width of the content plus the padding plus the border. You can see the calculation by using your browser’s development tools and going to the Computed tab:
Here the content width is about 56px, padding is 131px, and the border is 4 px. This is how it is rendered in the browser:
content-box rendering
Similarly with the height: the rendered height is the sum of the content height, padding height, and border height.

In contrast, with border-box the width is rendered with the specified width, and padding and content are adjusted dynamically, e.g.:
This can make responsive layouts more intuitive and easier to create:
border-box rendering

Play with the Codepen here.

Source/more details here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s