How to place the border inside of div and not on its edge with CSS?

To place the border inside of div and not on its edge with CSS. we set the box-sizing property.

For instance, we write

<div>Hello!</div>
<div>Hello!</div>

to add divs.

Then we write

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

to set box-sizing to border-box to put the border inside the divs.

We add the border with border: 20px solid #f00;.