This page contains a number of examples of where browsers currently have trouble rendering nice focus rings. Navigate this page using Tab and Shift+Tab to see how the focus rings appear in all of the different cases below.
First, here's an example using the browser's default focus ring
These work decently well, but for clarity, the rest of this app will use a larger style to make the problems more apparent. The following buttons use this replacement style as an example to compare all of the others to.
The biggest problem we hit is with rings getting cut off by
overflow: hidden. The box around the button below hides
overflow, and you can see how the ring edges get cut off, leaving almost
none of it visible.
You've already seen how the outline style used for the
focus ring so far has not matched the border radius used on these
buttons. This problem only gets worse as the radius is increased, for
example on larger buttons or other shapes.
This is an exarcebated example to showcase what usually ends up being a
minor problem, but if the target element uses padding for
spacing or alignment, that padding will get included in the shape of the
focus outline, which can have weird visual effects.
These are just a few examples that we've encountered where the browser's mechanisms for focus fall short.