Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when "tabbed" to. These borders also show up when the link is clicked (in it's "active" state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
    outline: none;
}

NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.

Comments

  1. User Avatar
    Designer
    Permalink to comment#

    Doesn’t work. Border is still there.

  2. User Avatar
    graystatic
    Permalink to comment#

    It didn’t work for me on firefox until I added, a:focus then the outline disappeared.
    So the final code was:

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

  3. User Avatar
    James
    Permalink to comment#

    Graystatic is correct. Needed the a:focus in Firefox to work.

    However wouldn’t that negate the keyboard navigators feedback?

  4. User Avatar
    Nathaniel
    Permalink to comment#

    Same for me. For Firefox it needs to be

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

    • User Avatar
      ajay
      Permalink to comment#

      a:active, a:focus { outline: none; }
      this works for me thx

  5. User Avatar
    anish

    i really liked this way of removing the border.

    but at the same time when the user browse the page using TABS, show the a:hover property on each links instead of the dotted border

    • User Avatar
      anish

      found out how to do it.

      actually i didn’t know that :focus is used for applying styles when it gets keyboard focus.

      by applying the required style to :focus , i was able to do this

  6. User Avatar
    Kontaktas
    Permalink to comment#

    Works fine, thanks

  7. User Avatar
    Roz
    Permalink to comment#

    Yup. if you add a:focus, she works great in Firefox!

  8. User Avatar
    black-light-studio
    Permalink to comment#

    CSS Reset documents often takes care of this

  9. User Avatar
    Ssk
    Permalink to comment#

    it helped to remove annoying outline (I was wrongly referring to it as ‘border’ before reading this tutorial) that FireFox was displaying around the html5 video I had on my web site. Thanks.

  10. User Avatar
    jruhl
    Permalink to comment#

    None of these recommendations worked for tabbing onto my button in Firefox. (I tried button:focus{outline:none;} as well). After much pecking around I found the following recommendation that worked!
    button::-moz-focus-inner {
    border: 0;
    }

  11. User Avatar
    SIFE
    Permalink to comment#

    As always asked the difference between

    a:active { outline: none; }

    , and

    Ta:focus { outline: none; }

    . Thank you for the explication, and the tip.

  12. User Avatar
    Edgar
    Permalink to comment#

    This worked for me:

    a:link {
    outline: none;
    }

  13. User Avatar
    Tushar
    Permalink to comment#

    Thank You………… this solved a great problem in my project as all images ware outlined on click but now work fine with this property…………….

  14. User Avatar
    Len
    Permalink to comment#

    None of the above worked for me until I did this:

    1) make the rule more specific (ie. add style a.toggle), and 2) use :transparent

    a.toggle:active,a.toggle:focus {
    outline:transparent;
    }

  15. User Avatar
    Abe
    Permalink to comment#

    It works thanks

  16. User Avatar
    Reaz

    It didn’t worked for me but worked with the following:

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

  17. User Avatar
    Mehul
    Permalink to comment#

    It worked for me. Thanks much for your help.

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

  18. User Avatar
    LebCit
    Permalink to comment#

    Thanks a lot, save a lot of time effort and search !

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

  19. User Avatar
    Anna
    Permalink to comment#

    I just want say tahk you for all css trics!
    Its save me so often! thank you very much! really!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag