Adding a border to an element can get really annoying when it shifts your beautiful layout around.
One way to solve this is by creating an invisible outline — an outline that has no width, no height, and doesn't take up any space.
The way we achieve this is by creating a box shadow that has a spread but with zero blur and zero offset:
The values for a CSS box shadow are:
By having no offset, we keep the shadow centred on the element, so it's the same thickness all the way around. With no blur, we make sure that it appears like a solid line.
But because we have no offset or blur, we have to include a spread — otherwise, the shadow has zero width!
Here's a demo if you want to play around with it a bit: https://codepen.io/michaelthiessen/pen/rNjzzdW