Description

There are 3 areas that could use interop attention:

1. Only Chrome on macOS lets outline-color alone change the outline. Firefox and Safari ignore the color request and continue drawing their default outline styles
2. outline-color should allow the value of invert and only Firefox handles that correctly per spec, it does this by using currentColor
3. If authors do want to change the color of the outline, across browser, they currently must pass outline-style, which has the side effect of no longer matching the border radius of the focused element

Rationale

There was a lot of positive developer feedback when Chrome aligned with Firefox and Safari on making the outline follow the shape of the element. This meant no more box-shadow focus outlines were needed anymore.. mostly. Recently I did a dive into the cross browser customization of this nice shapes focus outline, and found some issues that I've listed above in the description. I still see the box-shadow "hack" in the wild, like in this material component or this article. It's my understanding that these box-shadow solutions don't work for forced color modes or high contrast modes.

Half of the great work is done, having the outline follow the element shape, but it's a big bummer that attempts to customize the color to match a brand means losing the shape. We want people using the built in focus indicator.

Specification

https://www.w3.org/TR/css-ui-4/#outline-props

Tests

https://wpt.fyi/results/css/css-ui?label=master&aligned&view=subtest&q=outline