<section>
  <button type="button" class="focus">only :focus</button>
  <button type="button" class="focus-visible">only :focus-visible</button>
  <button type="button" class="both-focus">
    :focus and :focus-visible
  </button>
</section>

.focus:focus {
  outline: 2px solid red;
}

.focus-visible:focus-visible {
  outline: 2px solid blue;
}

.both-focus:focus {
  outline: 2px solid yellowgreen;
}

.both-focus:focus-visible {
  outline: 2px solid orange;
}