How to remove the dotted border from links

I’m sure that many of you have noticed the dotted border that surrounds links when you click on them. It’s actually an accessibility feature and in most cases it’s fine, but in some cases that dotted border surrounding active links can be quite annoying and ugly. There is a very simple and easy way to hide the dotted border from active links. All it takes is a few lines of CSS and you’re done.

Simply add the following CSS to your style sheet and the dotted borders surrounding your links will be gone.

a:active {
    outline: none;
}

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. Mia on May 10, 2010

      This is such a simple line of code to implement in ones source – but def something which is over looked by many designers / users . It amazes me when I see the dotted border link on many famous Design sites – it looks horrible in my opinion . This is the very first thing I implement in my source -always ! Now lets hope everyone else does the same 🙂

      M.

    2. Cre8ive Commando on May 10, 2010

      @Mia – I guess it’s good to have the dotted border in some cases for accessibility (people who have a phobia of using a mouse) but I agree that it doesn’t look very nice in most cases 🙂

    3. Kiran Kumar on May 18, 2010

      Its a very tiny tip but most of the people don’t know this..

    4. Stonedeft on May 27, 2010

      OH Jeez as simple as that !!

    5. Melzz on July 28, 2010

      This is a very handy tip to get rid of that ugly dotted line HOWEVER in order to maintain accessibility (in particular keyboard navigation) it is advisable to create an alternative style to highlight the active/focus element when tabbing through with the keyboard. Depending on the design I might make this the same as my hover style.

    6. Patrick Quirke on July 29, 2010

      I’ve wanted to use this code on so many of my sites but unfortunately the clients we have insist on top level accessibility or at least AA.

      Nice tip though.

    7. Cre8ive Commando on July 29, 2010

      Yep, I think creating an alternative style for active elements sounds like a great idea. 🙂

    8. Fabio Pires on July 30, 2010

      I hate those dotted borders. Thanks for the tip!

    9. pharmacy technician on August 6, 2010

      My cousin recommended this blog and she was totally right keep up the fantastic work!

    10. Matthew Yankelovich on August 9, 2010

      You may need to add the same style definition to the a:focus as well. At least I usually have to for Firefox , at least, to get this desired outcome. Maybe it’s just me 🙂

    11. Lee Fuller on September 24, 2010

      A very annoying feature.. but so easily removed.. I thankfully knew this code.. but for those who didn’t know it, now do.. thank you for sharing this..

    Trackbacks

    1. […] This post was mentioned on Twitter by Adham. Adham said: How to remove the dotted border surrounding active links with one line of CSS. http://bit.ly/dlDdOl […]


    0

    Have your say!