Need someone to lead product management at your software company? I create software for people that create software and I'm looking for my next opportunity. Check out my resume and get in touch.

CSS dotted borders in IE

Freshness Warning
This blog post is over 20 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

Great prodct managers own the outcomes (May 14)
Being a product manager means never having to say, "that's not my job."
Too Big To Fail (Apr 9)
When a company piles resources on a new product idea, it doesn't have room to fail. That keeps it from succeeding.
Go small (Apr 4)
The strengths of a large organization are the opposite of what makes innovation work. Starting something new requires that you start with a small team.
Start with a Belief (Apr 1)
You can't use data to build products unless you start with a hypothesis.
Mastery doesn’t come from perfect planning (Dec 21)
In a ceramics class, one group focused on a single perfect dish, while another made many with no quality focus. The result? A lesson in the value of practice over perfection.
The Dark Side of Input Metrics (Nov 27)
Using input metrics in the wrong way can cause unexpected behaviors, stifled creativity, and micromanagement.
Reframe How You Think About Users of your Internal Platform (Nov 13)
Changing from "Customers" to "Partners" will give you a better perspective on internal product development.
Measuring Feature success (Oct 17)
You're building features to solve problems. If you don't know what success looks like, how did you decide on that feature at all?

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2024 Adam Kalsey.