Branding - Overriding the browser default :focus Selector

This post is based on a question that was recently asked here.

Question

"When user uses Keyboard instead of mouse, when they are using the TAB key on the homepage, the Home button and other button on the banner will be highlighted by the white dotted lines, and when it comes to the tiles, they are also highlighted by that white dotted line, but the visibility of that dotted lines is very minimal around the tiles, is there a way we can change the color of that dotted lines using the macro set or style sheet."

Demo

 
This 'dotted lines' is added by the browser for accessibility reasons and it could vary depending on the type of the browser. I found couple of excellent blog posts on this topic which are listed below.

https://www.kirupa.com/html5/changing_the_default_focus_styles.htm
http://outlinenone.com/

Overriding the browser default :focus Selector

Fluid - Global override

We simply need to add the following CSS to the 'Global Override Style Sheet' used in our current theme.

In this example, the 'Global Override Style Sheet' used in the current theme is shown below.

Demo

Fluid - Tile override

Let us say that we only want to change the :focus on the Tiles, then we can simply target the Tile elements by adding the following CSS instead to the 'Global Override Style Sheet' used in our current theme.

Demo

Classic - Global override

Similarly, if we want the same global override in Classic, we can simply add the following CSS as an 'Additional Style Sheet Object' in the 'Branding System Options' page.

Demo