Steps to reproduce
According to MDN: “The outline-width CSS property sets the width (thickness) of an element’s outline.”
In Edge, setting the outline-width property causes elements to stop drawing focus rings entirely.
Tabbing to this element should draw a 20px wide focus outline. Instead it doesn’t draw any focus outline at all. If you remove the outline-width property then tabbing to the element draws the default focus outline.
Comments and activity
It looks like this is a differing opinion between the browsers.
In Chrome and Firefox if you set outline-width, it will use the default focus indicator and just change its width.
In Edge if you set outline-width it will remove any default styling so it appears as if it’s gone. If you additionally set outline-style: solid, then the ring reappears and properly applies outline-width.
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Assigned To to “bbrinza”