What happens when the outline disappears
Someone strips outline: none from a button because the browser's blue rectangle clashes with the rest of the interface, ships it, and moves on. A keyboard user tabs through the page a week later and has no way of knowing which element is active. Nothing is broken in the visual sense: the button still works, the click handler still fires. It has just become invisible to anyone who isn't using a mouse.
The default focus indicator exists because browsers can't assume how someone is navigating a page. Removing it without putting something else in its place doesn't tidy the design up, it deletes a piece of information a keyboard or switch-device user depends on to know where they are. A focus ring builder is useful precisely because it lets you replace that default with something that matches the rest of the interface.
Outline, box-shadow or border, and why the choice isn't cosmetic
There are three practical ways to draw a focus ring, and each behaves differently. An outline sits outside the element's box and doesn't affect layout, which makes it the safest default: it won't push neighbouring content around when it appears. A box-shadow can follow a rounded corner more predictably across older browsers and can be layered, so you can combine an inner and outer ring for extra contrast. A border takes up space unless the element is set to box-sizing: border-box, which means adding one on focus can shift text by a pixel or two, an effect that's more noticeable than it sounds once you're tabbing quickly through a form.
Why outline-offset matters
outline-offset puts distance between the edge of the element and the ring itself. On a button with its own visible border, an offset of even a few pixels stops the ring merging into the button's edge and reads as a distinct, separate shape. It costs nothing in markup and is one of the cheapest ways to make a ring easier to see against a busy background.
A ring only works if it's visible
A focus ring that matches the brand palette but disappears against the surrounding colour has solved the wrong problem. WCAG's non-text contrast requirement asks for a minimum 3:1 contrast ratio between a focus indicator and the colours immediately next to it, which is a lower bar than body text but still one that a pale ring on a pale card will fail. The GOV.UK Design System took the opposite approach and picked a solid yellow background with a black border for its focus state, precisely because it needed something that would hold up against every background colour used across government services.
Checking that ratio by eye is unreliable. Running the ring colour and its background through a contrast checker gives a clearer answer, though any automated check is only measuring the colours you give it: it can't see a background image behind a translucent card, and it won't catch a ring that becomes invisible the moment a component sits on a photograph.
:focus and :focus-visible aren't the same thing
:focus fires whenever an element gains focus, including a plain mouse click, which is why a custom ring built purely on :focus can end up flashing round every button a mouse user clicks. :focus-visible lets the browser judge whether the interaction looks like a keyboard one, and shows the ring mostly in that case. The practical effect is a ring that appears for the people who need it to navigate, without adding a visual flourish that mouse users never asked for.
Where a custom ring can quietly fail
Forced-colours mode, the setting some people rely on for legibility on Windows, overrides custom colours system-wide. An outline generally survives this because the browser treats it as a distinct, respected feature; a box-shadow often does not, because forced-colours mode has no concept of shadows and simply won't render one. A ring built entirely from box-shadow can therefore vanish completely for someone who has turned on high-contrast settings specifically to see the interface better, which is the opposite of what the setting is for.
Dark mode raises a related question: a ring tuned for contrast against a white card needs checking again against whatever the dark surface actually is, because the same colour that reads clearly on one background can sit almost flush against the other. The same goes for any component that appears on more than one background colour across a site, a card that's sometimes on white and sometimes on a tinted section, say. A ring is a per-context decision.
Keeping the ring consistent once it's decided
Once a ring's colour, width and offset feel settled, the values are worth storing as design tokens. Keeping them in a shared set of custom properties, the kind covered in the CSS Variable Architect guide, means a later change to the ring colour is a one-line edit. It also makes the decision visible to the next person who touches the styles.
Terms like non-text contrast and :focus-visible come up often enough in accessibility work that it's worth having a fixed definition to hand; the design glossary covers both, along with the surrounding vocabulary practitioners use day to day.