Как изменить обводку фокуса

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

Задайте свою обводку в псевдоклассе :focus-visible. Нажмите Tab, чтобы её увидеть:

<style>
  button, a { outline: none; }
  button:focus-visible, a:focus-visible { outline: 3px solid orange; outline-offset: 3px; border-radius: 4px; }
</style>
 
<button>Save</button>
<a href="#">Help</a>

:focus-visible срабатывает, когда фокус нужно показать — при переходе с клавиатуры. При щелчке мышью по кнопке обводки не будет, а в текстовом поле она появляется всегда.

Почему outline, а не border

outline не занимает места и не сдвигает соседние элементы, а outline-offset отодвигает обводку от края. Рамка border меняет размер элемента, и при фокусе всё вокруг слегка дёргается.

Подсветить всю карточку

Если в карточке есть поле или ссылка, псевдокласс :focus-within или :has(:focus-visible) выделяет весь блок:

<style>
  .card { padding: 12px; border: 2px solid silver; border-radius: 8px; }
  .card:has(:focus-visible) { border-color: steelblue; }
</style>
 
<div class="card"><a href="#">Read the article</a></div>

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

Пишут :focus { outline: none; } и не задают замену. Посетитель, который не пользуется мышью, перестаёт видеть, где он на странице. Убирать стандартную обводку можно только вместе с понятной своей.