Get our posts emailed to you with our monthly newsletter, subscribe here.

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…

[css] a:active { outline: none; }
a:focus { -moz-outline-style: none; }
[/css]

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…

Posted by Stu Greenham

Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency.

13 Comments

  1. 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

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

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

  4. Imperial Dalek May 25, 2009 at 9:52 am

    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

  5. @anand – Thanks for taking time to comment, glad I could help!

  6. Thank you. Exactly what I needed

  7. @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

  8. 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.

  9. 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.

  10. 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.

  11. @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!

  12. 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!

Comments are closed.