How To Remove Dotted Border From Links In Firefox

Image frame
How To Remove Dotted Border From Links In Firefox
Maruf
Aug 14th, 2008
Maruf scribbled this post.

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:
Dotted link border in Firefox

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;
}

Filed away: CSS

comments

Image frame
1

The 100% working fix is:

a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }

Alex
Feb 11th, 2010

feel free to leave a scribble

Name:
Email:
gravatar
Want an image next to your comments?
visit gravatar.com
Message:
Get a free quote