css inner border, broken layout

Question

I have divided the screen with many div so they stick one to each other (let say, something like chess-board, but with fields of variable sizes). I set heigth and width using percents (relative to parent container).

Now, when I add border: 1px to the divs, all the layout breaks... I imagine that the border adds 1px to each side, and the solution would be to add some internal border. Can I add somehow such an internal border?

Answer 1

You can use box-sizing: border-box to make the border's width part of the width of the element.

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Browser support.

Answer 2

Use outline property. Unlike the border propperty it does not "add" to the height or width of the elements. However also unlike the border propeerty you can not have left, right, bottom or left individual properties. Although you can have outline-style, outline-width and outline-color properties.

Outline Refrence