According to MDN: "The outline-width CSS property sets the width (thickness) of an element's outline." In Safari setting the outline-width property affects the distance between the element and the outline. But the outline itself is always the same width. Example: http://jsbin.com/tegisinedo/1/edit?html,output Clicking on the element in the above example should draw a 20px wide outline. This is the behavior in Firefox and Chrome. In Safari it instead puts 20px of padding between the element and the outline.
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. In Safari, if you set outline-width it will affect the padding between the outline and the element. If you additionally set outline-style: solid, then the ring will be drawn to the correct width.
You should raise a GitHub issue in the CSSWG.
Did any such issue get raised? Is there any action to take here?