Search code examples
cssoutline

How to use the native browser outline in CSS?

When focusing an input field Chrome and Safari show an outline that can be removed via CSS: outline: none;.

I want to display this outline at some other parts to improve usability. Is there a way to use the native browser outline? I only found out how to display a custom one.

Solution

  • You need to check out for each browser (via Inspector, F12, or Firebug) what the default setting is. For example in Chrome it is

    :focus {
    outline: 5px auto -webkit-focus-ring-color;
}