Placing border inside of div and not on its edge

Question

I have an <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.

I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.

Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?

Answer 1

You can set the box-sizing property to border-box like this:

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;

}

div + div {

    border: 10px solid red;

}

<div>Hello!</div>

<div>Hello!</div>

The above code will work for IE8 & above versions.