Anchor tag Active Effect in Chrome?

Question

I am working on an application which implements a list filled with anchor tags into a list of clickable tabs by wrapping it and the content for each tab in a container. Here is the list, for reference. This code outputs the following image. The second image is an example of what happens in Chrome after I click on a non-default tab (i.e. Loans).

I believe Chrome is generating this blue border as some sort of active effect for the anchor tag, as it is removed if i press any keys or click at all. The blue border also does not appear in Internet Explorer 10. I have not tested other browsers.

Is there any way to prevent this border from appearing in the first place?? I am almost sure it is generated by the webkit somehow but am not well-versed in it, nor know much about docs for it.

    <ul>
    <li><a href="#Borrowers">Borrowers</a></li>
        <li><a href="#Loans">Loans</a></li>
    <li><a href="#Organizations">Funding Sources</a></li>
    <li><a href="#Users">Users</a></li>
    </ul>

Images Illustrating Before and After Click

Answer 1

That border is displayed to show focus. Add the following css snippet to remove the focus outline from all of your elements.

*:focus {outline: 0;}

If you don't want to eliminate the focus outline for all elements but rather just your tab list add the following.

li:focus{outline: 0;}

Made a quick fiddle as an example.

See sample with focus outline and sample without focus outline