Border adds width to element, how to avoid?

Question

css

Hello!
There is a grid of blocks, on click I add a class with border: 2px to highlight the selected object. Naturally, the frame adds these two pixels from all sides and the selected object pushes nearby objects away, which makes the grid look crooked.
Are there solutions to fix it?

Answer 1

I usually used Box-shadow , and everything works without problems, the box-sizing property solves your problem, well then you need to initially set border: 2px solid transparent for all blocks, and already change the selected element to color, border-color: #333; for example, well, I would advise the shadow, there are no problems with the location on top, bottom or left or right, of course you decide.

Answer 2

box-sizing:border-box (+ don't forget the prefixes)

Answer 3

use the css property box-sizing: border-box;
htmlbook.ru/css/box-sizing

Answer 4

Use outline A generic
property that simultaneously sets the color, style, and thickness of the outer border on all four sides of an element. Unlike the line specified through the border, the outline property does not affect the position of the box and its width.
more htmlbook.ru/css/outline

Answer 5

Another option is to make a border for all blocks, and only change the color.