css

Get rid of dashed box around links


A great easy improvement for any website is getting rid of that annoying dashed box that appears when clicking on a link. Many big sites like eBay.com and Google.com have not removed this dashed box from their hyperlinks and I think it just looks tacky. I understand that it might help some users understand that it is a link, but it also detracts from the design of the page. I think we have surpassed the age of tables and outlines, people know from common sense today where a link is and isn’t.

Here is a small snippet of CSS that you can add to your stylesheet that will remove the outlines [dashed box] from your hyperlinks. This is successful in Mozilla Firefox 2, 3, Internet Explorer 7, 8, and Safari 3, 4.

outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;

I think it is an easy way to add some class to your page. I implement this in every page I design. Below is an example of a dashed/outlined hyperlink box.

Hyperlink Outline Box - Dashed Box


You may also like:

IE space between images Anyone that does a fair amount of web design knows that Internet Explorer likes to "set itself apart" from the other major browers by not interpreting...
CSS float property tweak If you have ever done any work styling a web page with CSS, specifically the float attribute, you may have come across a minor annoyance. If you are ...
Bullets in HTML email disappearing? Are you crafting an HTML email to send out and trying to use bullets? If they are suddenly disappearing in Outlook 2007 or Outlook 2010, try adding th...
READ ALSO  Your Browser is Incompatible with Spiceworks
Tags:,
  • Alex ‘Freedom’ Haines

    Okay, never even thought of that and it’s going to be implemented on every site I can as soon as I can so thanks a bunch!