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

Spread the love

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;.

Leave a Reply

Your email address will not be published. Required fields are marked *