Dotted border appearing after link click

Question

A dotted border appears around the hyperlink when clicked. I want to remove the dotted border appearing around the link (happens only in firefox). I have the following styles applied to anchor tag:

a, a:hover, a:link, a:active {
    text-decoration: none;
    color: #777777;
}

Link appears fine > click on the link > this box appears > goes off when clicked somewhere outside

URL: http://www.boxleak.in/ritgan

P.S.: Bootstrap is also included.

Answer 1

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused".

Try

a:hover, a:active, a:focus {
  outline: 0;
}

Read - https://css-tricks.com/removing-the-dotted-outline/

Answer 2

Basically it's a default focus style for <a> tag. Using a:focus you can removed that border.

a:focus {
 outline: none;
}