When 1 px border is added to div, Div size increases, Don't want to do that

Question

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

Answer 1

I usually use padding to resolve this issue. The padding will be added when border disappears and removed when border appears. Sample code:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

View my full sample code on JSFiddle: https://jsfiddle.net/3t7vyebt/4/