How to render a border to a div without occupying any extra space?

you can compensate it with negative margin, or simply use outline.

div { border: 10px solid red; margin: -10px};

or

div { outline: 10px solid red; }

alternatively you could use css3 boxshadow to fake a border...

example: http://jsfiddle.net/meo/K23s7/

You have 3 choices:

1. Inner and outer boxes(as @xpapad stated).
2. Using outline, e.g., outline:1px #000 solid;. Read more.
3. Using box-sizing, which is a css3 property. E.g., box-sizing:border-box;. Read more.