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!
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.
@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 🙂
Its a very tiny tip but most of the people don’t know this..
OH Jeez as simple as that !!
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.
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.
Yep, I think creating an alternative style for active elements sounds like a great idea. 🙂
I hate those dotted borders. Thanks for the tip!
My cousin recommended this blog and she was totally right keep up the fantastic work!
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 🙂
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..