Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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 ]
[ 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 ]
[ 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 ]" />

..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.


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!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
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. Avatar photo

    Thanks for the quick replay Perishable, I should have known that
    ie6 is useless :(

    Thanks for the help anyways,

    One day… one day I will tame
    this rebel browser!!!

  2. Avatar photo
    Perishable 2008/06/30 8:05 am

    I feel your pain, Bez — we all feel your pain! ;)


  4. Sweeeet!
    I have been looking all over the web for the fix to this VERY annoying outline and just as I was ready to give up, I found your site.
    Thanks dude!

  5. Avatar photo
    Perishable 2008/07/06 8:00 am

    My pleasure, ZeSev22 — happy to help! :)

  6. The Iceman 2008/07/08 5:27 am

    Great solution. I use a little ‘stretcher’ on our website to expand text and collapse text. I was very happy to find this to eliminate the outlines especially using firefox.

    Thanks again… Appreciate the easy method of getting rid of that stuff!

  7. Avatar photo
    Perishable 2008/07/09 6:49 am

    Excellent, Iceman — glad to be of service! :)

  8. Avatar photo

    This saved me! Thanks for this. I had a hard time finding out what the heck those little lines were called in the first place. Thanks again for the simple solution to removing these for my sifr fonts!

  9. Avatar photo
    Perishable 2008/07/20 7:07 am

    My pleasure, Branden — thanks for the feedback!

  10. thanks for this tip, been searching for something like this

    * :focus { outline: 0; }

    for a while now. great trick, nothing to say, just one more time thanks.

  11. great css tip, thanks.
    however using -moz-outline: 0 none;
    will break any w3c validations, i’m pointing this out just as a warning

  12. fragrant.monkey 2008/08/30 11:56 pm

    unfortunately the only method i’ve ever found that works in ie is by adding the following to every link in the markup… (i know, for shame…)



    <a href="info.html" rel="nofollow">

Comments are closed for this post. Something to add? Let me know.
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 »
Blackhole Pro: Trap bad bots in a virtual black hole.
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Nice collection of free SEO APIs and user-agent lookups for Googlebot, Bingbot, Applebot, YandexBot, and more.
90% of online customer support is just explaining how to do basic troubleshooting.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.