The default browser focus ring is not beautiful. Designers frequently remove it because it disrupts the visual design. This is one of the most common accessibility mistakes on the web.
Why focus states matter
Keyboard navigation is used by people with motor disabilities, power users, and anyone navigating a form without a mouse. When focus states are removed, keyboard users cannot tell where they are on the page. The interface becomes unusable for anyone not using a pointer device.
The right solution
The right solution is a custom focus state that is visible, clearly associated with the focused element, and consistent with the visual design. Use the :focus-visible pseudo-class to show focus styles only when the element was focused via keyboard, not via mouse click.
Define a custom :focus-visible style for all interactive elements, remove the default outline only when you have replaced it with something better, and test the result with keyboard navigation before shipping.