Использование границ для обозначения состояния имеет некоторые оговорки, главным образом, граница не просто плавает вокруг элемента, она добавляется к его размерам, которые в результате будут немного перемещаться при наведении на него курсора. Для этого есть несколько простых решений. Что вы выберете, может зависеть от контекста.

Демонстрация всех приведенных ниже решений: https://jsfiddle.net/r5eafkv9/

Примечание. В своих примерах я использую button, но все это применимо независимо от того, какой элемент вы стилизуете. Это может быть гиперссылка, div или что-то еще.

1. Используйте outline вместо border.

Границы рисуются внутри границ элемента и добавляют к его окончательным размерам (по крайней мере, в блочной модели CSS по умолчанию; мы вернемся к этому*). Однако контуры рисуются вокруг элемента и могут также перекрываться, а не смещать соседние элементы. Вы можете думать о них как о абсолютно позиционированных относительно кнопки (или любого другого элемента). Они не взаимодействуют с блочной моделью, когда дело касается размеров/позиционирования.

.btn.outline:hover {
  outline: 4px darkgreen solid;
}

2. Прозрачная граница по умолчанию.

Добавьте прозрачный border в состояние по умолчанию. Пока это та же ширина, что и для состояния :hover, размеры будут такими же.

.btn.transparent {
  border: 4px transparent solid;
}
.btn.transparent:hover {
  border: 4px darkgreen solid;
}

3. *Установите box-sizing на border-box.

Это указывает блочной модели CSS учитывать отступы и границы при расчете ширины и высоты элементов, в отличие от блочной модели CSS по умолчанию (content-box), и в этом случае добавление отступов или границ к элементу добавит к его окончательному результату. размеры экрана, и их необходимо учитывать.

.btn.borderbox {
  box-sizing: border-box;
}
.btn.borderbox:hover {
  box-sizing: border-box;
  border: 4px darkgreen solid;
}

Общие советы

1. Я не могу выразить важность понимания блочной модели CSS. На самом деле это не так уж и сложно, и предварительное изучение сэкономит вам бесконечные часы, которые в противном случае были бы потрачены на изучение методом проб, когда вы застреваете в подобных случаях, когда в игру вступает блочная модель. Также следует знать, что это самый простой вариант ответа на вопрос «почему так?» быть «потому что коробочная модель».

2. Просто личная рекомендация, не обязательно евангельская, но первые строки почти каждой таблицы стилей, которую я когда-либо писал, следующие:

    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;      
    }

Обнуление margin и padding не является обязательным, но если вы, как и я, помешаны на контроле, вы оцените чистый лист. Более важным моментом (по крайней мере для меня) является правило box-sizing: border-box, которое упрощает большую часть сложности блочной модели. Вы хотите, чтобы div имел ширину 300 пикселей?... width: 300px; Готово. Не всегда так бывает с поведением по умолчанию (box-sizing: content-box).

3. Я настоятельно рекомендую вам обратиться к веб-документам Mozilla , когда вы пытаетесь понять какое-то, казалось бы, странное поведение. StackOverflow — отличный ресурс (мягко сказано), но нет ничего лучше тщательной, структурированной документации, позволяющей действительно понять, почему что-то ведет себя неожиданно, а не просто найти заклинание, чтобы остановить это. И пока я рассуждаю на эту тему, вот запись о блочной модели CSS.

Приятного кодирования!

Быстрая касательная

Что касается комментария Paulie_D о половинных пикселях: они могут просто округляться большую часть времени, но они на 100% являются действительным CSS. А когда задействовано аппаратное ускорение (например, translate3d), они вполне могут иметь реальный эффект, а не просто округление до полного пикселя. Разумно ли использовать их явно — это другой вопрос (это может привести к тому, что элементы будут выглядеть размытыми, например, когда они занимают половину пикселя, и опять же, их также можно просто округлить (я думаю, обычно в большую сторону)).

Примените прозрачную рамку той же ширины в состоянии без наведения. Таким образом, элемент будет одинакового размера как при наведении, так и при отсутствии наведения.

body {
  margin: 1em;
}

nav {
  float: right;
  text-align: center;
  cursor: pointer;
  background: blue;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 4px 8px;
}

nav a:hover {
  border: 1px solid white;
  border-radius: 3px;
  background: rgb(0 0 0 / 0.1);
}

.n2 {
  margin-top: 1em;
  background: green;
}

.n2 a {
  border: 1px solid transparent;
}

hr {
  clear: both;
}

<nav>
  <a href = "">One</a>
  <a href = "">Two</a>
  <a href = "">Three</a>
  <a href = "">Four</a>
  <a href = "">Five</a>
</nav>

<p>The problem</p>

<hr>

<nav class = "n2">
  <a href = "">One</a>
  <a href = "">Two</a>
  <a href = "">Three</a>
  <a href = "">Four</a>
  <a href = "">Five</a>
</nav>

<p>The solution</p>

Примените прозрачную рамку к элементу, на который вы хотите навести курсор, и в состоянии наведения примените цвет границы к элементу наведения.

body {
  margin: 1em;
}

nav {
    display: flex;
    flex-direction: row;
    text-align: center;
    cursor: pointer;
    background: blue;
    padding: 0.5em;
    margin-bottom: 1em;
    gap: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 4px 8px;
  border:1px solid transparent;
  border-radius: 3px;
}

nav a:hover {
  border-color: white;
  background: rgb(0 0 0 / 0.1);
}

.n2 {
  margin-top: 1em;
  background: green;
}

.n2 a {
  border: 1px solid transparent;
}

hr {
  clear: both;
}

<nav>
  <a href = "">One</a>
  <a href = "">Two</a>
  <a href = "">Three</a>
  <a href = "">Four</a>
  <a href = "">Five</a>
</nav>