Как сделать анимацию сторон (border) без искажения пространства?

Question

[Ingernirated]

Добрый вечер!
Подскажите, при попытке сделать анимацию на border, получается ужас, который приводит в движение блок, как оставить его статичным в данной ситуации?
https://jsfiddle.net/3mg7hrxL/12/

Comments

[ProjectSoft]

*, ::after, ::before {
	box-sizing: border-box;
}

И ни каких искажений не будет. Т. к. Размеры будут с учётом border.
У div изначально не задан border вообще.
https://jsfiddle.net/nvd6efx8/

Answer 1

[Dymok]

https://jsfiddle.net/3mg7hrxL/19/

Comments

[Ingernirated]

спасибо!

Answer 2

[Neyury]

Есть два варианта. Задать рамку изначально, но цветом фона, либо использовать тень: box-shadow

Пример:
box-shadow: 0 0 0 2px black;

Данное свойство будет имитировать рамку.

Answer 3

[Владимир Скибин]

https://jsfiddle.net/3mg7hrxL/21/
Вот так?

Answer 4

[Denis Kunitsyn]

Просто на hover добавь box-sizing: border-box

.box > div:hover {
border: 2px solid black;
box-sizing: border-box;
}