I was just checking something in Internet Explorer 6 for the Microsoft Windows XP Home Operating System. Something I often forget is the fact that it renders dotted borders as dashed. I’m aware of the hack that was revealed not too long ago — and a good hack it is, but what kills me is that it is a bug so obviously noticed.
Wouldn’t that be something that’s easily fixed when going from version 5 to version 6? Maybe there’s a good reason for it. I can understand obscure bugs being replicated from version to version, but man… a dotted border should look different than a dashed one.
My apologies to IE6 users out there — I think my dashed links look horrible, but dashed they will be.

CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders
Handcrafted CSS Book and DVD New Riders
Web Standards Solutions Special Edition Friends of Ed
Instapaper Icon design
10 Comments
This is an interesting phenomenom, really. IE actually DOES render dots instead of dashes, only not for when you set your border-width to 1px.
But since most people set their borders to 1px, many simply assume that IE does not render dots at all.
I learned this by accident while working on Computer Tutor. Granted, large dots aren’t pretty, but they ARE dots.
You know, that’s always been what’s ticked me off the most!
I use dotted borders a whole lot in my designs, and the ugliness of dashed ones actually makes me rethink the decision.
I still think that using background-image is sort of a hack, but then, if a “hack” is the only way to get around such an obvious bug, then maybe its not a hack anymore ;)
h1 {
border-bottom: 1px solid #000;
}
body > h1, div > h1 {
border-bottom: 1px dotted #000;
}
that’s what i do, especially handy for links
Why not just change the border-style?
body>h1,div>h1{ /* selectors should contain no space if you don’t want IE5.0 to apply the rule [related]. */
border-bottom-style:dotted;
And I also like to use “thin” instead of “1px”, but again IE messes it up.
aliotsy – very interesting. Thanks for that info. Makes more sense now, that it’s only botched when at 1px width.
I also like the idea of showing IE a solid line instead.
I also find that 1px dashed borders, when rendered on a colour background in my IE6/Windows, look like the line colour over white, regardless of the background colour.
EG: A black dashed border on a purple background appears to be a white and black dashed border. Sound familiar?
I think it could be a local bug. I haven’t encountered it anywhere else. Irritating though. Incredibly ugly, as you can imagine.
Cool tidbit Anne… already bookmarked :)
Dan – you may know this, but if you want to apply a style only to IE6, you can set the links to work like this:
a {border-bottom: 1px dotted;}
* html a {border-bottom: 1px solid;}
I don’t know what the reasons are (they’re lost in someone else’s blog, for sure) but to the best of my knowledge the ‘* html’ only affects IE6.
I am a IE6 user. And after months of seeing dashed lines instead of dotted ones, I think they have grown on me.
Wow! You know I wondered, but thought I was going mad! Good to see that it’s not me!
Please keep up all the hard work, you truly ARE making the Web a better place… Microsoft will catch up eventually ;)
Coos