Bug 178224 – outline-width affecting padding, not the width of the outline.

• Status: NEW
• Component: CSS

[Rob Dodson]

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.

[Rob Dodson]

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.

[Simon Fraser (smfr)]

You should raise a GitHub issue in the CSSWG.

[Brent Fulgham]

Did any such issue get raised? Is there any action to take here?