CSS box-sizing – impact on padding and border

<style type="text/css">
.box {
  width: 100px; height: 100px;
  background-color: lightgreen;
  float:left; margin:10px;
  /*default box-sizing is content-box*/
  box-sizing: content-box;
}
.box1 {
  padding: 2px;
  border: 2px solid lightblue;
}
.box2 {
  padding: 10px;
  border: 10px solid lightblue;
}
</style>

<div class="box box1">Hello world</div>
<div class="box box2">Hello world</div>