Get rid of the dotted border from a focused hyperlink

You must have observed this behavior that when you click on a hyperlink it is surrounded with a dotted border as shown in the image below:

clip_image002

I observed this behavior in Internet Explorer 8 and Firefox 3.0 and above. I also tested the behavior in Safari 4.0.4 and Google Chrome 4, but they did not display such border. Even though, this is temporary and the border disappears as soon as the link loses its focus, I do not like it. So I came up with this solution.

Add the following CSS to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<
head>
<
title> Get rid of the dotted border</title>
<
style type=”text/css”>
a:focus {
outline: none;
}
</style>
</
head>
<
body>
<
a href=”#” id=”anchor1″ target=”_blank”> Read More..</a>

</body>
</
html>

You can add the same code in your Expression Web page.

However, this could be a problem for users with disablity or those using keyboard instead of mouse. In that case, a woraround could be, when you remove the dotted border, you could change the color of the font similar to the hover/active hyperlink or change the font-weight to bold. This could help the user get a visual cue for navigation. See below:

a:focus{
outline:none;
color:#FF0000;
}

or

a:focus{
outline:none;
font-weight: bold;
}

Filed Under: CSS Hacks, Tips and TricksExpression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (5)

Leave a Reply | Trackback URL

  1. [...] This post was mentioned on Twitter by Medical Cumulus. Medical Cumulus said: Get rid of the dotted border from a focused hyperlink « Microsoft … http://bit.ly/bp3rSD [...]

  2. Deeko says:

    aesthetics vs accessibility

    When a user is navigating 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. Consider this before removing those outlines.

  3. Nice article, appreciated

Leave a Reply