CSS dotted borders in IE

Freshness Warning
This blog post is over 17 years old. It's possible that the information you read below isn't current and the links no longer work.

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.

This discussion has been closed.

Recently Written

The Trap of The Sales-Led Product (Dec 10)
It’s not a winning way to build a product company.
The Hidden Cost of Custom Customer Features (Dec 7)
One-off features will cost you more than you think and make your customers unhappy.
Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2021 Adam Kalsey.