I was wondering what is the best way to add a border to my elements without extending its dimensions. 

As far as I know, there are two ways to achieve it: `box-sizing:border-box;` and an inset `box-shadow`. Which one is wise to use and why?
['https://Stackoverflow.com/questions/22296301', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1211785/']
Well `box-shadow` isn't a border, it's a shadow, so this question pretty much answers itself.

If you wish to add a border without increasing an element's dimensions, you'd use `box-sizing: border-box`, as this is what it's designed for.

From [the specification](http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing):

> 
> The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. 
> 
> 
> 

Do note, however, that Firefox only supports the prefixed version: `-moz-box-sizing: ...`.
I would suggest to use `box-sixing:border-box;` because it's not affecting the content of the element in connection to a usual CSS border. An inset-shadow might overlap the contents. In addition to that there's a better browser support for `box-sizing:border-box` like Mathias commented.