How to change border width on hover without affecting layout

I recently came across a situation where I needed to modify the border width of an element when hovering or focusing the element.

Immediately without much thought, I just adjusted the border-width on hover and focus.

scssCopy
.card {
  border: 1px solid #eee;
  &:hover,
  &:focus {
    border-width: 2px;
  }
}

The issue here is that the border-width increase causes a layout shift within the element and surrounding elements.

To get around the layout issues of modifying border-width, instead we can make use of a inset box-shadow to create a faux border that we show on hover.

scssCopy
.card {
  border: 1px solid #eee;
  &:hover,
  &:focus {
    box-shadow: inset 0px 0px 0px 2px #eee;
  }
}

Now it's as if the border is growing from 1px to 2px without affecting any layout. View the demo on CodePen.