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: ...`.
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.