CSS3 box-sizing property

CSS3 box-sizing property is used to tell the browser what the sizing properties. Should they include the border, padding in a box or just the contents.

Property	Value
box-sizing	content-box \| border-box. Default value is content-box.

In content-box: border and padding is not included in the width and height of the element, whereas, in border-box: border and padding is included in the width and height of the element.

Example 1: Box-sizing: border box.

<html>
  <head>
    <style> 
      div.container {
        box-sizing:border-box;
        width: 100%;
        border: 1em solid;
      }

      div.box {
        box-sizing:border-box;
        width: 50%;
        border: 1em solid red;
        float: left;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">This div occupies the left half.</div>
      <div class="box">This div occupies the right half.</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>