How is the default focus outline implemented in browsers?

Question

I'm talking about the solid or dotted line border that is shown around the element that currently has focus.

I thought that it was just CSS outline applied by the browser, such as

:focus {
    outline: black dotted 1px;
}

But I've noticed that if I try to customize the focus outline by using CSS, the look of it is changed but so is the behavior in some cases.

Please see my question regarding focus outline for links with divs inside for examples:

Custom focus outline for links with div inside

(In short, if you have link with complex content and apply your own focus outline, things get weird)

Obviously the browsers don't just only apply the simple CSS above for focus outline. They must do something more to make the default work as good as it does, regardless of the element that it is applied to.

Does anyone know how it works?

Can I do something to make my custom focus outlines behave the same as the default ones?

Voted to close as duplicate of your own question that you are referring to, because IMHO this could very well be put into that very question by editing it. No need to split this apart. — CBroe, May 31 '18 at 09:55
The default value for outline-color is not "black", but "invert" (which would be black when on a white background). But the "invert" color seems to have magical properties. For example, when used, the outline width seems to be fixed at 1px. I don't know why, but it could be a performance constraint to limit the number of pixels required to be read from the screen and altered. The upshot is that "invert" is treated differently from other color values. — Alohci, May 31 '18 at 20:48

loikein · Answer 1 · 2021-06-06T03:02:21.357

This qustion is fairly old, but I bumped into it several times when searching about outline that I want to try answering.

According to outline - CSS: Cascading Style Sheets | MDN, there are three parts to the declaration of an outline: colour, style and width, and the default values are:

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
}

and according to another SO answer, WebKit browsers have their own outline style, which makes my whole answer:

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}

Notes:

medium in my Safari is rendered as 3px, which is, obviously, not 5px.
the colour -webkit-focus-ring-color is rendered as rgb(0, 103, 244).

score 0 · Answer 2 · answered Jul 05 '21 at 09:54

The answer of @loikein works well!!! but this isn't supported by IE11.
The solution to fix this issue and support also for IE11 is:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     outline-color: #666;
     outline-style: dotted;
     outline-width: 1px;
}
outline: medium auto currentColor;
outline: medium auto invert;
outline: 5px auto -webkit-focus-ring-color;

The @media is only for IE11 and the other options for the other browsers as @loikein wrote. (For example: outline: medium auto currentColor - for firefox)

How is the default focus outline implemented in browsers?

2 Answers2