Removing the Dotted Hyperlink Borders

I love Firefox, it is my favoured browser but there is one little thing that really frustrates me, especially from a designer point of view. You may, or may not have noticed that the browser adds a dotted border around hyperlinks that only become visible upon activating the link. For many this is probably not a problem as its not exactly causing any problems to anyone, but I don’t like it.

To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.

Anyways, here is the code…

a:active { outline: none; }
a:focus { -moz-outline-style: none; }

I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…

13 Responses

Jorge says:

Hi Stu,

I try your code to remove dotted hyperlink border, but it doesn´t work. I put it in HEAD of my HTML page, is it correct?

Thank´s

Muhammad says:

umm… I think, it should come when using keyboard especially when pressing the TAB or SHIFT + TAB. but with mouse it should not appear.

mari says:

hey! this was really helpful– none of the other suggestions i found for this problem took mozilla into account. thanks!!!

Imperial Dalek says:

You clever bunny !!
Those lines were really bugging me and looked rubbish on my site.
Two lines of CSS … WOW …

A real change now my themed image buttons look as good as they do when they are built in photoshop.

Thank you, very helpful

Stu says:

@Deen Foxx – Thanks mate, glad I could help! Although the outline lines are there for a reason as pointed out by Chad, but it is handy to remove should your design need it

Deen Foxx says:

Thank you. Exactly what I needed. And, in my case, the outline was messing up the display. The link was at the far bottom of a auto-scrollable area and everytime I clicked on the link the dotted border came up and made the text larger, causing the horizontal scrollbar to pop-up, and thus preventing the link from being followed until you scrolled down (vertically) and clicked it again.

You solution fixed the problem.

Mike says:

I suggest finding a way to work within your design aesthetics and still incorporate a focus style in your CSS. I’m sure you can come up with an attractive way to highlight selected links.

Harry Roberts says:

Yeah, I echo Chad’s comment completely. IE handles this amazingly well though, surprisingly. A clicked link won’t have an outline, but a link accessed via keyboard navigation will.

Stu says:

@Chad – You know what, I never thought of it in that way, thank you for your comments Chad, I guess your right, from a Accessibility point of view, it would be essential for navigating around the page!

Chad Swaney says:

I know how annoying (and unsightly) the focus outline can be, but it actually has an important function for accessibility. When people are trying to navigate through a page by keyboard (with no mouse, either due to a disability or due to personal preference) the focus outline is an important navigation aid so they can see where they are on the page. I have gone through this aesthetics vs. accessibility trade off on this issue many times, and it is up to the designer to decide, I just wanted to mention this concern.

Great blog and cheers!

Subscribe to DesignWoop and keep up to date. You can subscribe via RSS or Email.

Close
Close