Latest TweetsDifference between mod_alias and mod_rewrite perishablepress.com/difference…
Perishable Press

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!

Jeff Starr
About the Author Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Archives
52 responses
  1. Matthias Mächler August 20, 2009 @ 7:15 am

    Thanks for the outline-remove tip, you made my day.

    best regards
    Matthias Mächler

  2. Jeff Starr

    Awesome, Matthias — glad to have helped.

  3. A big, big THANK YOU for this!

    This was a problem “haunting” me for a while now, as those borders are totally unesthetical and may ruin even the most professional and elegant design. I knew of a more empirical fix for the problem, but this one is simply brilliant and very easy to use.

    Thanks again!

  4. Jeff Starr

    Happy to help, Vee — thanks for the feedback :)

  5. thanks so much.. youd be surprised how hard it was to find an answer to this problem that didnt involve border=0 in HTML

  6. Jeff Starr

    Glad to be of service, david! :)

  7. karachiite1 December 4, 2009 @ 11:41 pm

    i hate those border lines……….great tip! thanks!

  8. Hi Jeff
    Great article …big help.
    Just wondered if you know how to remove the link outline within a cs4 flash movie that has buttons with links
    I tried applying the zero outlne class to the div containing the SWF file but it doesnt clear the outline.
    Many thanks
    Steve

  9. Ryan Williams December 6, 2009 @ 8:26 am

    You need to apply it to the ‘object’ and ‘embed’ tags.

  10. Hi Ryan
    Thanks for the quick reply.
    I use Dreamweaver cs4 and loaded the SWF file from the insert command which places it in page okay but doesnt embed it.
    I applied “outline: "0” (and tried “outline: "none”) to the object class but still got the outlines.
    However I then deleted the inserted SWF and inserted it as a plugin which embeds it and hey ho the outlines dont appear even without setting an outline class.
    Can you shed any light on that …if embeded does that make all the difference?
    and what are the principal advantages or disadvantes between object and embed?
    Many thanks
    Steve

  11. Jeff Starr

    Steve, I think you may want to check your CSS syntax.. it looks like you have an extra quotation mark in your declarations. Perhaps that’s the issue..?

  12. Hi Jeff
    The syntax errors are just the way I wrote the comment , its not the way it was actually coded. In the class code I only put " " around the value.
    Thanks
    Steve

[ Comments are closed for this post ]