Code Snippet

Home » Code Snippets » CSS » Remove Dotted Link Borders

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.

Reference URL

Subscribe to The Thread

  1. Designer

    Doesn’t work. Border is still there.

    Reply ↓
  2. graystatic

    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;
    }

    Reply ↓
  3. James

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

    However wouldn’t that negate the keyboard navigators feedback?

    Reply ↓
  4. Nathaniel

    Same for me. For Firefox it needs to be

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

    Reply ↓
  5. 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

    Reply ↓
    • 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. Kontaktas

    Works fine, thanks

    Reply ↓
  7. Roz

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

    Reply ↓
  8. black-light-studio

    CSS Reset documents often takes care of this

    Reply ↓
  9. Ssk

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~