.tip

outline: none on a button takes the ring away from the person who got there with Tab and has nothing else to tell them where they are. Browsers draw their own ring on keyboard focus only, so the reset is what breaks it.

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

A mouse click matches :focus alone, so the ring stays off the pointer path for free. Text inputs match both, because typing comes next. outline follows border-radius, and the offset keeps it clear of your border.