Making the dotted line in a hyperlink disappear using CSS


Yes, yes, yes. We all have had this problem once. This is really bad.

Have you ever noticed how a sloppy dotted line appears when you make a hyperlink in HTML.  That very bad line which never appears to go away. And, when you are working on a client site, you are definitely dead for this.

By default, when your hyperlink is in active or focus state, a dreary, bad dotted lines appears around its corners. Well, there is a way to fix that.

This is a simple fix. However, the problem is not just limited to links, but, other media properties like embeds, flash, videos or images also mark this dotted line problem.

BUT FIRST, WHY DOES THIS PROBLEM OCCURS

This problem is basically an accessibility problem. By this, what I meant is that people who want to access the internet using just their keyboard can do so. And, this is achieved by using “jump” as they say. In short, you use your keyboard to access the webpage.

And, this is done by browsing up and down using the arrow keys. Also, it is also used for accessing links. You use the arrow keys, and it displays a dotted line around the link which  tells you which link you are currently on, so that you can use it easily.

But those times are gone. Now people don’t use keyboards to access the web. They use their tablets or mobile phones. So, instead of being a usable thing, it has become more of an issue for modern day web-designers.

THE FIX USING JUST CSS

Not digging deep into the reasons – why, what or anything else, here’s the code. Copy it, paste it, done.

a:hover, a:active, a:focus {
outline: 0;
}

Actually, by using this code, you remove the hyperlink dotted line problem at once.

OTHER OBJECTS

This does not finish here. You have other problems like the dotted line in embedded media like videos or games. Don’t worry, there is a workaround for that as well. And, it is quite same.

object, embed, iframe, video {
outline: 0;
}

So, as you can see, you can make the dotted line disappear from any element using the outline: 0; property.

VIDEO GUIDE

If you are having trouble following along, I have made a video for the above tutorial. I think I’ll call this and other videos to come the “DIY & How-to Web-Designer videos”.

OR

Watch the video on Vimeo. And, subscribe on Vimeo as well.

CONCLUSION

You saw how you can make disappear that dotted line from your element. But, did you know, you can use this similar technique to style an anchor tag. Noticed, how some websites have an hover effect. Using which, they enlarge or put a gradient background on hovers.

You can do that by using a:hover, a:active, a:focus. Just put in your styles that you require.

This was a simple tutorial which showed you how to get rid of a daily problem. If you liked it, share it with your friends.

Did you find a solution to your dotted line problem ? What else can we do to improve our user experience ? Tell me in the comments below.

RSS Feed

Enter your email address to follow this blog and receive notifications of new posts by email.

3 thoughts on “Making the dotted line in a hyperlink disappear using CSS

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s