There is a JavaScript library, Focusingly, that says:
With Focusingly, focus styling adapts to match and fit individual elements.
No configuration required, Focusingly figures it out. The result is a pleasingly tailored effect that subtly draws the eye.
The idea is that if a link color (or whatever focusable element) is red, the outline will be red too, instead of that fuzzy light blue which might be undesirable aesthetically.
Why JavaScript? I’m not sure exactly. Matt Smith made a demo that shows that the outline color inherits from the color, which yields the same result.
a:focus {
outline: 1px solid;
outline-offset: .15em;
}