Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. Doesn’t work. Border is still there.

  2. 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. 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. Nathaniel
    Permalink to comment#

    Same for me. For Firefox it needs to be

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

    • ajay
      Permalink to comment#

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

  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

    • 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. Permalink to comment#

    Works fine, thanks

  7. Permalink to comment#

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

  8. CSS Reset documents often takes care of this

  9. 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. 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. 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. Edgar
    Permalink to comment#

    This worked for me:

    a:link {
    outline: none;
    }

  13. 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. 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. Abe
    Permalink to comment#

    It works thanks

  16. Reaz

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

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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