Как добавить обводку, не сдвигая элементы

Короткий ответ

outline рисует линию вокруг элемента, не меняя его размер:

<div style="display: flex; gap: 12px;">
  <div style="padding: 12px; background: lavender; outline: 3px solid royalblue;">outline</div>
  <div style="padding: 12px; background: lavender; border: 3px solid royalblue;">border</div>
</div>

border — часть размера блока, и при его появлении соседи сдвигаются. outline рисуется поверх и места не занимает.

Отступ от элемента

outline-offset отодвигает обводку наружу (или внутрь, если значение отрицательное):

<button style="margin: 12px; outline: 2px dashed crimson; outline-offset: 4px;">Outlined button</button>

Обводка фокуса

Главная работа outline — показать, где сейчас фокус клавиатуры. Нажмите Tab:

<style>
  .btn:focus-visible { outline: 3px solid orange; outline-offset: 2px; }
</style>
 
<button class="btn">First</button> <button class="btn">Second</button>

:focus-visible показывает обводку при работе с клавиатуры и не показывает при клике мышью.

Частая ошибка

outline: none у всех элементов «чтобы убрать некрасивую рамку». После этого человек, который пользуется клавиатурой, не видит, где он находится, и не может пользоваться сайтом. Не убирайте обводку, а замените её своей через :focus-visible.