By default, the outline of focus is ugly, it doesn’t match website styling and is always squared so it won’t appear nicely if an element has border radius. A better approach for handling focus is using the following:
*:focus {
outline: none;
box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0.5);
}