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/']
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.
The official way of course is to use `box-sizing: border-box`. This will include both the border and the padding in the width and height of the element.

If you use a shadow with a spread distance, you can get the same effect as a border, except that the shadow is not part of the dimensions of the element, so it may overlap content outside the element for a regular shadow and content inside the element if using an `inset` shadow. It will also differ from using `box-sizing` in that any padding will increase the size of the element.

An advantage of using a `box-shadow` is that you can achieve [multiple faux-borders](http://dropshado.ws/post/1592190942/multiple-borders-with-box-shadow). You can’t do this with the regular `border` property.