Treehouse: Grow your CSS skills. Land your dream job.


Last updated on:

The box-sizing property in CSS controls how the "box model" is handled in regards to page layout. For instance, if you set an element to width: 100px; padding: 20px; border: 5px solid black; the resulting box is 150px wide. That is because the default box-sizing model is content-box, which behaves that way. Through the box-sizing property we can change that to padding-box (in which case the box would be 110px wide with 20px of padding on the inside), or border-box (in which case the box would be 100px wide with 10px of border and 20px of padding on the inside).

* {
  -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
  -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
  box-sizing: border-box;         /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */

See this example comparing default content-box to border-box:

This is particularly useful on things like <textarea> which you need to explicitly set to 100% width if you want it to fill a parent container, but is also likely you want padding on. Without box-sizing, you would an elaborate faking strategy involving extra wrapper elements.

This also makes fluid/float/grid layouts a lot easier where you want to use percentages for the grids but with fixed pixel padding.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1+ 7+ 8+ 2.1+ Yep

Chrome 1-9, Safari 3-5, Android 2.1-3.x require -webkit-. Firefox 1-28 require -moz-.


  1. m_gol
    Permalink to comment#

    I know this is not the newest article but it’s still “googlable” and it has a crucial error: a prefix is needed for any Firefox version, even current Firefox Nightly 22. If anyone follows the author’s advice without checking and drops prefixes, the site will be broken completely in Firefox.

  2. Chris Roberts
    Permalink to comment#

    As already noted, the prefix continues to be required by Firefox, and one additional note/update: the Firefox bug, noted in Browser Support, was fixed in Firefox 17, as noted on the same MDN page:

  3. Martijn
    Permalink to comment#

    It might be helpful to also write about how the box-sizing property affects the various javascript width/height properties. Although I know how quite well box-sizing affects CSS properties, in javascript it’s usualy a matter of trial & error to find the one most suited for the job.

  4. ngwdaniel
    Permalink to comment#

    I think in the first case (content-box) the width would be 150px (100px + 2 * 20px + 2 * 5px), not 140px.

    • Adam
      Permalink to comment#

      I agree with this comment. Total width of the box for content-box is: width + padding + border. The width of the content is set to 100px + the width of the padding is set to 20px for both sides + the width of the border is set to 5px for both sides. Your equation, as ngwdaniel mentioned, is therefore (100px + 2 * 20px + 2 * 5px) which equals 150px.

    • Chris Coyier
      Permalink to comment#

      Correct, fixed.

  5. Daniele Manca
    Permalink to comment#

    Hey folks,

    I am trying to apply this property to fix a problem I have on the below page,

    The main section is creating a white space between the section img and the aside, however even by applying box-sizing: border-box to the universal selector, nothing changes,

    Any clues?

  6. tzi
    Permalink to comment#

    Thanks for sharing this article!

    One note, the Firefox bug with min / max-height seems to be fixed since the version 17.


  7. Roland Hentschel
    Permalink to comment#


    I’m having problems with Safari and Seamonkey, when using border-box on floated divs


    The height can’t be %, but has to be px.


    When using relative and absolute positioning, % is OK.


    I just don’t understand, what the problem is …

  8. Matthew Vaughan
    Permalink to comment#

    Just a note that the comment in the code next to -moz-box-sizing still says “Firefox 1, probably can drop this”. Should say “Firefox 1-28″.

  9. Jan
    Permalink to comment#

    -webkit prefix needed for Android default browser (Android 2.3.6)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";