Removing the Dotted Hyperlink Borders
I love Firefox, it is my favoured browser but there is one little thing that really frustrates me, especially from a designer point of view. You may, or may not have noticed that the browser adds a dotted border around hyperlinks that only become visible upon activating the link. For many this is probably not a problem as its not exactly causing any problems to anyone, but I don’t like it.
To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.
Anyways, here is the code…
a:active { outline: none; }
a:focus { -moz-outline-style: none; }
I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…
About the author...
Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency Strawberry. Follow him on Twitter (@stugreenham) to find out what he's up to.
Here are some other posts:
Share the post...
We appreciate you helping our site grow by taking a few minutes to spread / share this post below:
I know how annoying (and unsightly) the focus outline can be, but it actually has an important function for accessibility. When people are trying to navigate through a page by keyboard (with no mouse, either due to a disability or due to personal preference) the focus outline is an important navigation aid so they can see where they are on the page. I have gone through this aesthetics vs. accessibility trade off on this issue many times, and it is up to the designer to decide, I just wanted to mention this concern.
Great blog and cheers!
@Chad – You know what, I never thought of it in that way, thank you for your comments Chad, I guess your right, from a Accessibility point of view, it would be essential for navigating around the page!
Yeah, I echo Chad’s comment completely. IE handles this amazingly well though, surprisingly. A clicked link won’t have an outline, but a link accessed via keyboard navigation will.
I suggest finding a way to work within your design aesthetics and still incorporate a focus style in your CSS. I’m sure you can come up with an attractive way to highlight selected links.
Thank you. Exactly what I needed. And, in my case, the outline was messing up the display. The link was at the far bottom of a auto-scrollable area and everytime I clicked on the link the dotted border came up and made the text larger, causing the horizontal scrollbar to pop-up, and thus preventing the link from being followed until you scrolled down (vertically) and clicked it again.
You solution fixed the problem.
@Deen Foxx – Thanks mate, glad I could help! Although the outline lines are there for a reason as pointed out by Chad, but it is handy to remove should your design need it
Thank you. Exactly what I needed
@anand – Thanks for taking time to comment, glad I could help!
You clever bunny !!
Those lines were really bugging me and looked rubbish on my site.
Two lines of CSS … WOW …
A real change now my themed image buttons look as good as they do when they are built in photoshop.
Thank you, very helpful
hey! this was really helpful– none of the other suggestions i found for this problem took mozilla into account. thanks!!!
umm… I think, it should come when using keyboard especially when pressing the TAB or SHIFT + TAB. but with mouse it should not appear.