Сдвиг макета при применении границы размером 2 пикселя к полю размером 1 пиксель в фокусе ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь добиться того же результата, что и поля формы Flowbite. Кажется, они используют рамку в 1 пиксель в фокусе (с прозрачным контуром в 2 пикселя), но результат выглядит как граница в 2 пикселя...
Как предотвратить смещение макета при применении границы в 2 пикселя к Поле размером 1 пиксель в фокусе?
Мое перо
Соответствующая часть:
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
border: 1px solid #ccc;
}

#contact input:focus,
#contact textarea:focus {
border-color: tomato;
border-width: 2px; /* Flowbite form fields seem to have a 1px border */
outline: 2px solid transparent;
outline-offset: 2px;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... d-on-focus