TheMonkeyMan TheMonkeyMan - 1 year ago 49
HTML Question

Placing border inside of div and not on its edge

I have a

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 Source

Set box-sizing property to border-box:

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;

It works on IE8 & above.