Get rid of dotted border from links

November 22, 2007 • 20 comments

We’ve all seen how Firefox will add a dotted border on any links are clicked. When coupled with the Phark technique, Firefox extends that dotted border to include your extremely indented text. However there are three different solutions to this:

  1. Getting rid of the dotted border completely
  2. Stopping the border from stretching
  3. Editing the Firefox default user style sheet to do solution 1 or two for all websites you visit

The first solution will essentially turn of the border completely leaving no outline

a {
    outline: none;
}

before:
long dotted border around image

After:
no dotted outline on image

The second solution will keep the border nice and tidy with your image.

a {
    overflow: hidden;
}

Before:
long dotted border around image

After:
Tidy dotted outline border

Lastly if you’re annoyed by the border as much as I am, there are two ways to perform either one of these solutions using the Firefox user style sheet.

But we’ll save that for the next entry.

Tags: , , ,

20 Responses to “Get rid of dotted border from links”

  1. December 7th, 2007 8:05 pm chocolaterain dude who sits next to you in JRs class :)

    stumbled upon again! how come I never stumbleupon my blog?!

  2. December 8th, 2007 2:50 am Swany

    wow, I’m so freaking excited… this is exactly what I was looking for a week ago.. i was stumbling, stumbling, stumbling and got distracted…I just landed on your page tonight… so thank you!

    Swany
    http://www.swany.cc
    http://www.swany.cc/TravelMap

  3. December 8th, 2007 4:16 am anna

    Indeed, the border is ugly. But with no border, people who go to links on pages using the tab key, now see nothing.

  4. December 8th, 2007 11:49 am Zaki

    Anna,

    Thats why you use method 2, or put an a:active or a:focus state on the image. That way a keyboard user will see a change on the links when using IE or Firefox.

    Thanks for your comments.

  5. December 9th, 2007 12:32 pm Arjan

    Be careful with removing the outline. For accessibility reasons these outlines are used, for example if you use tab when you browse by keyboard.

    A solution to make clear what link is active, you can apply a style to it by using the :focus state (like :hover).

  6. December 10th, 2007 2:37 am chocolaterain dude who sits next to you in JRs class :)

    Close to 8000 visits and yet only 6 comments, and two are mine… lame… :)
    just kidding man, that’s awesome. What’s the next blog gonna be about?

  7. December 10th, 2007 8:33 am Zaki

    Arjan, as I mentioned in the comments in this posting, when using -9999px for image replacement, the outline extends to the left to contain the entire element, however instead of doing outline:none you can do overflow:hidden and have the outline not extend all the way to the left. Also with a clear a:focus and a:active defined you can use outline:none and not have any accessibility issues. It is up to the developer to utilize all techniques together to create a well designed and easily accessible website.

  8. December 10th, 2007 11:12 am Arjan

    Sure you can disable the outline by using :active. But I meant applying a whole new style for the active state. You can, for example, use an background image with a kind of glow to highlight the usage of a tab. Of course there are way more creative solutions.

    What I forgot in my previous comment, is mentioning that using text-indent itself can be harmful. If the visitor has turned images off, there will be nothing to display. (Of course I know that not many people have CSS turned on, but images off… I just mention it.)

  9. December 10th, 2007 2:59 pm Edward Turtle

    Ahhh thanks, that’s a great help, cheers

  10. December 11th, 2007 10:51 am LouCypher

    From userstyles.org/forum/comments.php?DiscussionID=371:
    *|*:-moz-any-link:focus {
    outline-width: 0 !important;
    }

  11. December 12th, 2007 6:08 pm Tony Landis

    Great tip, thanks

  12. December 12th, 2007 10:40 pm XGhozt

    Wow, this is great! I didn’t even realize that was possible. I just assumed it was a firefox feature or something. I’m going to take advantage of this one!

    Thanks.

  13. January 22nd, 2008 8:13 pm Joe

    Urm…am I the only one this doesn’t work for?

    I haven’t got dashed borders happening to my links in firefox but instead Ive got single blue outlines appearing around my links and I applied the first technique shown and its still stayed the same.

    Any ideas?

  14. January 22nd, 2008 8:21 pm Joe

    Hey no worries, I found it somewhere else, just add into your html bit

    coolio hoolio ;)

  15. January 22nd, 2008 8:22 pm Joe

    didnt come out but…. border=”0″ after your image src bit of html

  16. March 2nd, 2008 7:02 pm Arencykneedly

    Hello there.
    Just found your site. Great job!
    I like it much.
    look here http://live.com

  17. June 2nd, 2008 8:06 pm james

    this post rules! I was about to just give up. Thanks!

  18. July 30th, 2008 4:00 pm Jane

    works perfectly, thanks for the big help

  19. August 9th, 2008 7:20 pm Alex Grogan

    I’m still laughing about whoever said, “people who go to links on pages using the tab key, ”

    I mean - WHO browses a page like that?

    Use a mouse.

  20. August 9th, 2008 11:34 pm Zaki

    People with disabilites such as low mobility. Thanks for dropping by.

Your 2 cents: