Edit in JSFiddle

<div id="container">
    Container
    <div id="content-block" class="block"></div>
    <div id="padding-block" class="block"></div>
    <div id="border-block" class="block"></div>
</div>

#content-block {
    box-sizing: content-box;
    top: 20px;
}

#padding-block {
    top: 200px;
    box-sizing: padding-box;
}

#border-block {
    top: 340px;
    box-sizing: border-box;
}

#container {
    position: relative;
    display: block;
    width: 300px;
    height: 500px;
    margin: auto;
    background: #FFFFCC;
    text-align: center;
    line-height: 40px;
}

#content-block:after {
    content: "Content box";
}
#padding-block:after {
    content: "Padding box";
}
#border-block:after {
    content: "Border box";
}

.block {
    position: absolute;
    display: inline-block;
    left: -100px;
    right: -100px;
    width: 100%;
    height: 100px;
    margin: 20px auto;
    padding: 20px;
    border: 10px solid #FFCCCC;
    background: #CCCCFF;
}
.block:after {
    content: " ";
    display: block;
    height: 100%;
    background: #CCFFCC;
    line-height: 40px;
}
body  {
    background: #000;
}