content-box vs border-box

by Alon Rotem

HTML

<!--
Box sizing:
    content-box: The W3C box model.
    The upper box is 140px + 50px border = width of 190px. 

    border-box: The traditional box mode, supported by IE6- and quirks mode.
    The lower box is 140px including a 50px border.
-->
<div class="centered-container">
    <div id="contentBox" class="box"></div>
    <br/>
    <div id="borderBox" class="box"></div>
</div>

CSS

div.box {
    background-color: white;
    width: 140px;
    height: 140px;
    border: 50px solid red;
    display: inline-block;

}
#contentBox {
    box-sizing:content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}
#borderBox {
    box-sizing:border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.centered-container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}