Remove The Dotted Outline On Links

There are so many things possible when we talk about links and CSS. You could change almost everything you want and all around the internet we see different link styles we have never seen before. That is the greatness of CSS and the creativity of people.

Today we will discuss the use of a dotted outline on links, because one little improvement will do loads of good to the cleanness of your links. We want to delete that outline.

Dotted Outline

You still don’t know what I mean with that outline thing? Take a look below for an example from this blog. You could also check it for yourself by clicking on any link on this blog and you will see the outline appear.

I thought this outline thing had a difficult solution as I thought the outline was build in by browsers to apply to the links. So it was a standard that couldn’t turned turned off. But it has a solution.

The Solution

Fortunately, we have Google as our friend and I did some searching. The first keywords, the first result was the page I was looking for. There is the solution and it was much easier then I expected: it’s just plain CSS!

CSS

a{
outline:0;
}

This trick removes the outline from any link, but that is not the best solution. Some people go through all links via the “tab” key and if you apply this trick, the outline is deleted on that “tabbed-links” as well, with the result that users don’t know where they are navigating.

That’s why there is another solution, a somewhat more user friendly one. The outline usually only appears when you click on the link and that is called making the link active. The active state of the link can be styled:

CSS

a:active{
outline:0;
}

Conclusion

The solution is now user friendly, accessible and good-looking! As we all know, things like this aren’t required for a great blog or website, but all those little things help you making your website that small bit better to view and use.