Why is outline-width being ignored?

Question

I noticed that when I set outline-style: auto in my CSS then the outline is always 2px wide, regardless of outline-width, unless outline-width is 0, then there is no outline.

Why do browsers ignore outline-width in this case and how can I change the width? (I know I can use outline-style: solid but it just doesn't give the same effect).

div {
  background-color: #CCC;
  width: 50px;
  height: 50px;
  margin: 10px;
  outline-color: dodgerblue;
  outline-style: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<div style="outline-width: 0px">0px</div>
<div style="outline-width: 1px">1px</div>
<div style="outline-width: 10px">10px</div>
<div style="outline-width: 1em">1em</div>

What browser are you using? Have you tested it across multiple browsers? Does the issue appear the same across all the browsers you tested? I see this from the example you provided: http://i.imgur.com/mSLG31r.png — seemly, Nov 07 '16 at 17:19
Not an answer, but this may be helpful in what I think you're trying to do: http://stackoverflow.com/questions/17324960/copy-chrome-default-inputs-outline-style — DBS, Nov 07 '16 at 17:29

Asons · Answer 1 · 2016-11-07T18:21:35.457

If you use for example outline-style: solid; it will work

Not acknowledge the width set when style is auto is reported as a bug in Chrome, Edge/IE11 does not render it unless a style is set, other than auto, and Firefox render auto as solid

W3C say: (https://www.w3.org/TR/css-ui-3/#outline-style)

The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. As such, this specification does not define how the outline-color is incorporated or used (if at all) when rendering auto style outlines. User agents may treat auto as solid.

div {
  background-color: #CCC;
  width: 50px;
  height: 50px;
  margin: 10px;
  outline-color: red;
  outline-style: solid;
}

<div style="outline-width: 0px">0px</div>
<div style="outline-width: 1px">1px</div>
<div style="outline-width: 10px">10px</div>
<div style="outline-width: 1em">1em</div>

You missed the part where it says "(I know I can use outline-style: solid but it just doesn't give the same effect)" — BoltClock, Nov 07 '16 at 18:04
@BoltClock So does not my 2:nd paragraph in my answer, the italic one, answer that? — Asons, Nov 07 '16 at 18:06

BoltClock · Answer 2 · 2016-11-07T18:30:20.107

When outline-style is auto, browsers draw custom, platform-specific outlines. This may result in them ignoring any or all of the other outline properties if they're not supported by their custom outline implementations. This means you may not be able to customize the width of the outline.

Interestingly, the spec only mentions browsers being free to ignore outline-color, even though it doesn't make sense to force them to honor arbitrary non-zero values of outline-width when drawing platform-specific outlines that might not even support arbitrary widths in the first place (as is most likely the case with whatever browser you're testing this in).

Note that Firefox treats outline-style: auto as outline-style: solid (which is mentioned in the spec, too), which means it will render outlines with the width you specify. IE and Microsoft Edge do not appear to support outline-style: auto at all, which makes all of this irrelevant to those browsers (I'd have at least expected Microsoft Edge to treat it as solid since that's how Windows 10 draws focus styles by default anyway, but I digress).

Why is outline-width being ignored?

2 Answers2