How to prevent shifting when adding border on hover? (Transparent border is not a solution)

Question

I want to add a border to div on hover, but the div shit slightly when the border is added. It is a well-known problem, and the common solution is to add a transparent border. (

Answer 1

You can simply fix this with outline property

.inner-container:hover {
  outline: 1px solid blue;
 }

and if you are using big border eg: set outline:3px; solid blue; then use outline-offset:-3px;

try with demo

https://jsfiddle.net/be7441LL/2/