Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Sharpen Your Site by Removing Unwanted Link Border Outlines

Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. To illustrate the phenomenon, I have collected some “real life” examples from around the Web..

Examples of unwanted link outlines

Here are a few examples of live websites demonstrating this distracting behavior BTW: no offense meant to any of these sites — they are all great — they just happen to serve as good examples of unwanted link border outlines..

Check out a Live Demo »
[ Thumbnail: Link Outline Example 01 ]
RudeWorks
[ Thumbnail: Link Outline Example 02 ]
GimmeSome Tune (at the Apple Store)
[ Thumbnail: Link Outline Example 03 ]
WordPress Login Screen (pre-2.5)
[ Thumbnail: Link Outline Example 04 ]
PhotoMatt (previous design)
[ Thumbnail: Link Outline Example 05 ]
GadgetTrak
[ Thumbnail: Link Outline Example 06 ]
Perishable Press (Jupiter Theme)

A plain and simple problem

The dotted outline/border issue demonstrated in each of these examples is an artifact of the browser’s (Firefox, in this case) default style for linked elements upon gaining focus. To see this effect, disable the stylesheet of any web page and tab through the links. As you navigate through the document, each focused link will appear surrounded on all four sides with a dotted border, according to the browser’s default styles.

With CSS applied, the outline border of indented, block-level links will surround both the linked element and the entire area between the block element and the browser window. Given that this behavior generally accompanies highly specific, rigorously designed header layouts, I am surprised that more designers don’t notice the issue (or simply don’t bother to fix it), especially given the ease of the solution..

A Quick and Easy Solution

Fortunately, the solution to this unwanted behavior resides in a simple bit of CSS. Depending on your design, there are different ways to approach the removal of unwanted outlines. If you are into CSS reset styles, then you may want to begin your design by neutralizing all focus outlines entirely:

* :focus { outline: 0; }

If you decide to reset all focus outlines in this way, remember to build them back up for usability purposes and according to your needs. Some sort of distinct, clear focus style is especially important for users that depend on tabbed browsing to navigate web documents.

If, on the other hand, you prefer to remove the focus border only for a single (problematic) element, replace the wildcard operator in the CSS rule above with something more specific. For example, if your markup looks like this:

<div id="header">
	<a href="http://domain.tld/" title="The swellest banner image of them all">
		<img src="http://domain.tld/path/image.png" alt="[ Something Swell ]" />
	</a>
</div>

..and you wanted to remove an unsightly focus border from the linked image, you could target that specific element and do the job like so:

div#header a:focus, div#header a:active { outline: 0; }

..or simply:

div#header a { outline: none; }

If you are also concerned with older versions of Firefox and Mozilla, you could nuke ‘em all with this outline-destroying death-blow:

div#header a:focus, div#header a:active {
	outline: 0 none;
	-moz-outline: 0 none;
	}

There are, of course, many ways to go about targeting specific elements and removing link outlines using CSS, however the point here is that it is a very simple thing to prevent those amateur-looking focus borders from stretching all the way across the screen, especially when the link itself constitutes some smaller, well-defined area.

CUL8R

Anyway, that’s a wrap for this fine CSS tutorial. Hopefully this information is helpful for those wanting to sharpen their site for the more critical visitors among us. As always, thank you for your generous attention!

About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

52 responses to “Sharpen Your Site by Removing Unwanted Link Border Outlines”

  1. Steve,

    I’m having the same issue as you, however the plug-in didn’t work either. Are there any other settings you might have changed along with it?

  2. THX! I had been fighting for over a day with a flash gallery inside an iframe and this was the only solution that worked.

    thx (a lot)

  3. @Diego: My pleasure – glad to hear it worked for you :)

  4. Northern Ireland Hotels 2010/03/09 9:06 am

    Really really useful solution. I hate the borders!!

    This has been bugging me for months!

    Bookmarked and shared :)

    Cheers,

    Lee.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.