CSS dotted borders in IE

Freshness Warning
This article is over 11 years old. It's possible that the information you read below isn't current.

One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders.

A style declaration of border-bottom: 1px dotted black; is shown as if you had used dashed instead of dotted. I use dotted borders as separators between sections of my individual archive pages and I long ago decided not to work around this particular bug. Broken browsers get broken CSS and that’s all there was to it.

That’s all fine and dandy with this site. It’s my site and my decision. But I recently needed to create a dotted border for a client site, and I didn’t want to resort to some table background hack. I set to work figuring out how to get IE6 to show a dotted border. What I came up with is a CSS background hack.

First I created a 2×2 image with a single dot in the lower left corner. The dot is the color that I want to use as my border color. In the case of this blog, that would be hex #A5AEC5.

Then I went into the CSS and changed my rule that creates the dotted border. It used to simply say…

.hr {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #A5AEC5;
}

Since that works in Mozilla, I needed a way of creating a rule that would only work in IE. I wasn’t able to find a CSS hack that would cause only Internet Explorer to apply a rule, but the star-html hack keeps all versions of Mozilla, Netscape, and most versions of Opera from reading a rule, so it’s good enough for these purposes.

Using that hack, I added a rule after my existing rule that disables the dotted bottom border and adds a background image aligned to the bottom and set to repeat horizontally. The background image is that 2×2 image I created earlier.

.hr {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #A5AEC5;
}

* html .hr {
	border-bottom: none;
	padding: 1px;
	background: url(/images/css-dotted.gif) repeat-x bottom;	
}

Now something that’s odd is that IE wouldn’t display the background image unless the div had some sort of size applied to it, but when I added height: 1px; to the CSS IE insisted on making the block 10 pixels high. It seems that IE is applying either padding or margin to that block, even though I specified that both should be zero. So the workaround I ended up using was to use a single pixel of padding instead or setting the height to one. That way, the div still has a vertical dimension, but IE doesn’t force it to be larger than I wanted.

Now Mozilla, Netscape, and recent versions of Opera show the dotted CSS border and most other browsers see the dotted image as a border. Take a look at the borders near the comments form of this entry to see how it looks.

Nick
May 2, 2007 10:33 AM

Abu Aaminah, it's possible. But I don't know how to do it in JS :)

lasiman
June 25, 2007 1:59 AM

REAL DOTTED without Image can be accomplished by: border:0px; border-top:1px dotted #000000; height:0px; works in all browsers.. ---------------- have a good day..

Robert Nikolic
July 12, 2007 7:21 AM

That is all fine, but what if I need to border a whole div with border dotted 1px? Any idea?

biturls
December 6, 2007 1:10 AM

Very useful information. Thanks !

Tib
March 10, 2008 9:49 AM

This solved my pesky little problem. Thanks!

Oren
April 11, 2008 5:39 AM

Does anyone knows a clean way to remove IE borders from while using a background image? no css does that. for example: I need a 20px height HR with background image (not just dotted line). I used: hr { background:transparent; height:22px; width:99%; border:none; background-image:url(../images/parochet.png); background-repeat:repeat-x; background-position:bottom; }

Tom
April 15, 2008 4:49 AM

works here too actually. tested on IE6, IE7, FF

newbie
April 16, 2008 12:52 AM

hey how do you get rid of those dotted link borders in ie 7

mister_L
June 1, 2008 12:22 PM

this works: border: 1px; border-style:dotted !important; border-style:dashed; border-color:#999999;

Beertje
June 23, 2008 7:33 AM

I tried every thing with a hr. It didn't work for me and then I desided to use a div with the hr class, so just a class. And it worked for me. Using an image of 2px width, 1px height with a 1x1px color and 1x1px white or what ever your background-color is! HTML: CSS: .hr { clear: both; padding-top: 1px; background-image: url(../images/border.jpg); background-repeat: repeat-x; }

Mario
January 22, 2009 4:27 AM

Thank You lasiman. i was looking 4 this code

Keelio
April 19, 2010 4:09 AM

IE 8 and 7 are not working. I have to change dotted to solid. Anyone success on IE8?

muhammad
July 30, 2010 6:55 AM

i tried hard but don't find yet the right dotted or dashed hr line.... if you know the right one, pls send me those code with mail.... i am waiting for you... send me full code... rokonmagura@gmail.com

Gutschein
September 21, 2010 9:43 AM

I have the same problem.. doesn't work for IE 7 / 8 Does anyone have solved they problem right now? If yes please answer this comment! Thanks!

Gutschein
September 21, 2010 10:49 AM

I have found a result.. I have tested it on Chrome, FF, IE and it works ;) hr {border:dotted #abb0b5;border-width:0 0 1px 0;} * html {border-top:2px dotted #abb0b5;margin-top:.5em;zoom:.5;} * html hr {margin-top:-9px;}

These are the last 15 comments. Read all 69 comments here.


Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Follow me on Twitter

Best Of

  • Let it go Netscape 4 is six years old.
  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • Pitching Bloggers Forget what you learned in your PR classes. Start acting like a human instead of a marketer, and the humans behind the blogs will respond.
  • California State Fair The California State Fair lets you buy tickets in advance from their Web site. That's good. But the site is a horror house of usability problems.
  • The best of 2006 I wrote a lot of drivel in 2006. Here's the things that are less crappy than the rest.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

11

Recently

Travel weight of coins (Aug 26)
My laptop bag was getting heavy, so I emptied it. Found 115 coins from 6 different countries in there. That will do it.
Aereo: a parable (Jun 26)
Here's why people who understand both technology and copyright law think the Supreme Court's Aereo decision defies common sense.
The birth of cubicle hell (Apr 29)
Where do cubicles come from?
Double Opt-In helps you (Apr 2)
A simple reason why double opt-in is a good thing for marketers.
Make the most of opportunities (Mar 5)
Often, part of success is being in the right place at the right time. What will you do with the opportunity when it happens?
Email as a model for future mobile phone service (Feb 10)
What if your phone wasn't tied to your phone number?
MySQL inadequecies (Feb 9)
This guy seriously hates MySQL and helps you understand how to use it better.
invisible Fence (Mar 22)
The New York Times has a paywall now. Sorta. If you don't choose to ignore it.

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2014 Adam Kalsey.
Content management by Movable Type.