[CSS3] box-sizing:borderbox, content-box

CSS

    .boxMenu{width:100%; padding:0;}
    .boxMenu::after{content:""; display:block; clear:both;}
    .boxMenu li{list-style-type: none;
      float:left; width:50%; text-align:center; padding:20px;
      background:#f8f8f8; border:10px solid #dddddd;
    }
    .bBox li{
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
    }
    .cBox li{
      box-sizing:content-box;
      -moz-box-sizing:content-box;
      -webkit-box-sizing:content-box;
    }
    .w300{
      width:300px; height:300px; background:#f8f8f8; border:10px solid #dddddd;
     }
     .w150{
       width:150px; height:150px; margin:50px; background:#f8f8f8; border:10px solid #dddddd;
      }
    .borderBox{box-sizing:border-box;}
    .contentBox{box-sizing:content-box;}
    .resizeBox{resize:both;}
    .outLine{
      outline:20px solid #33ff22;
      outline-offset:10px;
    }

See the Pen CSS3 box-sizing:border-box by daeyun (@daeyun) on CodePen.