Grow your CSS skills. Land your dream job.

Removing The Dotted Outline

Published by Chris Coyier

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).

You can try it for yourself by clicking on a link and mousing off of that link before letting go. Or, turn on the "Always use the cursor keys to navigate within page" preference, navigate the cursor around, and see the links become outlined.

Usually, this default styling isn't a big deal. Links are normally active for only a split second before a new page is loaded and the outline is gone. However, there are circumstances where you want to remove this outline.

Bear in mind that this styling literally uses the "outline" CSS property. Outline is very similar to the "border" property, with two important differences. One, outline goes around the entire object (much like using just "border"), but you may not be specific about sides. "Outline-left" does not exist. Two, the outline value is not a part of the box model. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don't get bumped around when the outline is applied and removed.

How to remove it

If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:

a {
   outline: 0;
}

In general, I recommend just leaving the default outline styling active, but there are a few circumstances where it is quite annoying and should be turned off. For one, if you have a page element that is using large amounts of padding (like for positioning) or is floated, these outlines can be very weirdly placed or even stretch the entire width of the screen. Just looks bad. Another scenario is if you steal away the "click" event from an anchor link for another purpose (like, to activate some JavaScript magics). That click will no longer be loading a new page, so the outline will become active and stay that way until you click away somewhere else, much uglier than the just quick and temporary view of it you normally get when clicking a link.

Make sure to add in new focus styles

Because that outline was providing an important accessibility feature, you should really (really) consider adding back in a style for your links focus and active states. Personally, I just like to make them the same as the hover state. It's about the same thing, as far as actual function. Whatever your hover state is, even if it's shifting a background image or changing size or whatever, it can be joined with the active and focus states. Like so:

a:hover, a:active, a:focus {
  // styling for any way a link is about to be used
}

Wow. I really intended this article to be like 3 sentences long and 1 clip of code. Things are never quite as simple as I want them to be!

Flash

If you are having trouble with this dotted out line on a Flash object/embed, you can:

object, embed { 
  outline: 0;
}

Firefox Inputs

Clicking down on an input type=image can produce a dotted outline (Does this in Firefox 3.6.8 but not Firefox 4). To remove it:

input::-moz-focus-inner { 
  border: 0; 
}

IE 9

George Langley wrote in to say that IE 9 apparently doesn't allow you to remove the dotted outline around links unless you include this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Comments

  1. Nice, very simple but helpful tutorial. I never really found this line to be bothersome but i suppose this is handy and could be implemented on some of my next projects.

    Good work mate.

  2. Permalink to comment#

    Thanks a lot, this thing really annoys me and being able to disable it is a great help.
    Keep up the good work!

  3. neil
    Permalink to comment#

    what, no jQuery? ;)

  4. JP
    Permalink to comment#

    specially usefull when you use the -9999px text indent, those borders look awfull!!

  5. Niobe
    Permalink to comment#

    This is just a headslapping duh moment. It always annoyed me in header images because it “shows” the buildup of the page.

  6. DesignerDad
    Permalink to comment#

    Helpful post. Even though they aren’t as common anymore, dotted lines reveal the clickable area on image maps or any image with hotspots. That typically ruins the look and feel to such things.

  7. Though I don’t like those outline, I found them very usefull.
    When you navigating with the keyboard, those outlines show you where your cursor is!
    I think there are also accessibility concerns about it… So if you remove them, do it consciously.

  8. I think there are also accessibility concerns about it… So if you remove them, do it consciously.

    That’s right! I like these outlines a little. They help with navigation.

    But it’s also nice to see how to remove them.

  9. Aaron B
    Permalink to comment#

    This is very helpful. I didn’t know how to remove them, and it’s VERY nice to know you can when appropriate. I think your tip of using the rollover state is a totally acceptable alternative.

    Thanks man!

  10. Great information. I’m going to add this tutorial to my article on the outline tag. Thanks!

  11. Greg Givan
    Permalink to comment#

    Its a shame that this property is only supported by Mac browsers. Window users only benefit from a this.blur(); call from an onclick event.

  12. JamieC
    Permalink to comment#

    Saw this article from my twitter feed on using BeTwittered.

    Border is calculated into the total
    width of the box, whereas outline is
    not. This is important so that layouts
    don’t get bumped around when the
    outline is applied and removed.

    It’s great to know how to remove the outline, but it is a great property for troubleshooting tight layouts since it doesn’t take up space.

  13. trice22
    Permalink to comment#

    The author mentioned more than once (and is obviously well aware of) the importance of outlines as accessibility feature, but when I’m reading the comments here, I’m not sure if this information actually got through to everyone:
    Generally speaking it’s a bad thing to remove the outlines! DON’T DO IT! I see how it can be interesting and in a few very rare cases even helpful to know how to remove them, but carelessly used, this technique will make your website inaccessible to potential users.
    If you have your office in the seventh floor, you wouldn’t switch of the elevator either, just because it doesn’t look good or doesn’t suit the style of your place, right? Because people in wheelchairs, with crutches or other difficulties to climb up seven floors wouldn’t be able to visit you then.
    So, think very, very careful if you really want to remove an accessibility feature as important as outlines around links.
    —trice

  14. Niobe
    Permalink to comment#

    @trice22: So something like
    #header a img, #menu a img{outline:none;}

    Not as extreme, but still removing it from where it would potentially ruin the look.

    • ungeziefer
      Permalink to comment#

      I wish this worked — but the images will still show the dotted outline on focus/click.

      Anyone know how to apply this only to image links?

      I had thought this would do it:

      a:focus img {outline: none;}

      But no such luck.

      Thanks,

      dustin

  15. The use of the additional focus tag is particularly handy tip, I think I’ll head back into a few sites and add this little function!

  16. Jeff Starr
    Permalink to comment#

    Another great post Chris! I recently discussed this very same issue after observing a number of otherwise beautiful designs that were suffering from oversized link outlines due to floated divs and various image-replacement techniques. There are several subtleties involved with removing unwanted link outlines, especially when targeting specific elements and dealing with different browsers. I agree that, in general, link outlines are important for usability, however, there are always cases where effective outline removal techniques prove beneficial. Cheers!

  17. Thanks! I always thought that declaration was a browser-specific css trick (and non-valid).

  18. This is totally something that I have tried to understand in the past. Great tip. Thanks

  19. Fantastic tip, thank you.

    It’s just a shame I need to go back on every site I have ever built to implement it lol

    Thanks anyhow !

  20. Permalink to comment#

    So that’s how you remove that ugly dotted border, thanks!

  21. Permalink to comment#

    I believe Eric Meyer suggested never to remove these outlines as they are part of the UI to help users know where they clicked. They are annoying at times, but they do help you find where you are or where you clicked last.

    The best thing to do is use blur() ala JavaScript if you need to get rid of them on any AJAX stuff.

  22. oliverastro
    Permalink to comment#

    Will it be better to leave him in zero?

    Outline:0

    In order not to lose the usability

    Greetings and thank you for your blog’s information

  23. Permalink to comment#

    Best thing I have read all day! Now my site looks so much cleaner and will add it to my CSS reset.

  24. THIS IS AWESOME! This has been driving me nuts! It’s something like this that really gives web-design that extra touch. THANKS!

  25. Excellent solution for positioned backgrounds and text-indent: -9999px;

  26. Permalink to comment#

    Hmm.. It didn’t work for me!
    Every image rollover I do in Dreamweaver has this outline in Firefox (Mac) AFTER it has been used. Check it out:

    http://www.rainborecords.com

    Click on the picture of the records at top center, then move the mouse away and hit the “back” button. On Firefox, the image is outlined and the “on” state is maintained (since there was never a “mouseout” command, I assume), In Safari, same thing but no outline. In PC, IE, neither of these problems.

    Any idea how to fix it? The outline=0 doesn’t make a difference.

    thanks,

    Jim

  27. Annie
    Permalink to comment#

    very helpful! thanks!

  28. Ohhh my word. I have always wondered how to do this. I cannot believe there is such a simple fix.

    Thanks for the tip!

  29. Matt J
    Permalink to comment#

    I find that using “overflow:hidden” is a better fix for Firefox when using a text-indent.

    This way you still get the outline, which is needed for non-mouse users, but now FireFox won’t have the outline box stretching across the page, just fixed to the size of the link.

    In my opinion much better and just as easy.

  30. This does not seem to work for IE6.

  31. aktlse
    Permalink to comment#

    how does it work for a flash object?
    i have an object (flashloaded Carousel), and i have to click on it to see the picture. everytime this damn dotted outline appear! can someone give me the code to hide it?
    the outline: none; doesn’t work

  32. Permalink to comment#

    I would also like to know how it works for a flash object….

  33. Here’s a good one that allows you to override this behavior in Firefox, et all:

    :focus {
      outline: none !important;
    }
    
    ::-moz-focus-inner {
      border: 0 !important;
    }
    
  34. Cleverson
    Permalink to comment#

    Thanks!

    This is simple! not imagined.

  35. Matt
    Permalink to comment#

    Add this to get rid of dotted line on all link states

    a, a:active, a:focus {
    outline: none;
    }

  36. jaime
    Permalink to comment#
  37. Himansu
    Permalink to comment#

    Super its helped me a lot

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".