How To Remove Dotted Border From Links In Firefox

I’ve noticed that a lot of websites have an unexpected dotted border around links in Firefox. A lot of the times you can get away with it because it doesn’t look too odd (depending on your CSS). However, I’ve seen cases when it looks pretty odd.

Here’s an example:

I’ve actually taken that screenshot from a web design agency website (which is ironic). Everytime I click on a link, that odd border appears, and stretches across the entire screen.

The Fix

The fix is pretty simple. In your CSS stylesheet just add the following few lines under your CSS global declarations (at the top of your stylesheet). That will ensure that none of your links will suffer from the problem.

1
2
3
4

a:active
{
outline: none;
}