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.

Problem courtesy of: js-coder


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;
Solution courtesy of: Marcel Jackwerth


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.