Restoring outlines around elements in CSS

tl;dr - check the snippet below:

.outlines {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-browser-ring-color;
}

---

I've been working on the styling for the Southwest Airlines Customer Community. We've been using Lithium to host this community for around a year now, but we're in charge of our own styling changes. Luckily, they use SASS for all of their stylesheets and themes, so I have quite a bit of capability when it comes to styling work.

We performed a WCAG 2.0 audit, and one of the AA-level items we failed on was providing outlines for all elements on the page - namely, the search buttons right underneath the hero image at the top of the page.

While working on this ticket, I really wanted to restore the default outlining provided by the browser. It didn't take a whole lot to get an outline reapplied to the search button, but I really wanted it to match the rest of the page's outline styling.

After quite a bit of digging, I managed to find this StackOverflow answer that did exactly what I wanted. Turns out that the magic is applying some -webkit- styles to one of the two implemented outline rules would allow any WebKit/Blink-based browser to display the aura-style outline while Firefox and IE fall back to their standard dotted outline. While this isn't as good as using the actual browser outlines, but it's good enough for me.