Dotted 1px borders in Internet Explorer

Adam Kalsey wrote an awesome article called “CSS dotted borders in IE” which explains how to get Internet Explorer to properly render borders with a 1px dotted declaration. The fix is the star-html hack which enables you to write CSS for Internet Explorer only in your stylesheet. Then use a 2px background image with a 1px solid dot with the desired color and a 1px transparent dot (this requires Photoshop or some other graphics program, of course).

I’ve used the trick on my site for you Internet Explorer users because I think dotted borders look nicer than dashed ones for links. I use dotted borders for visited links so it is really easy to spot what pages you have already visited on the site.

Here’s my modified code:

/* Standard dotted border for non-IE browsers
----------------------------------------------- */
a:visited {
  border-bottom: 1px dotted #0099cc;
}

/* Make dotted border for IE using star-html
----------------------------------------------- */
* html a:visited {
  border: none;
  background-image: url("/images/border.gif");
  background-position: bottom;
  background-repeat: repeat-x;
  padding-bottom: 1px;
}

Thanks again Adam for a great tip. The dashed border glitch in Internet Explorer has bugged me for quite a while. Remember to include a 1px padding buffer to get the border to properly display.