Need someone to lead product or development at your software company? I lead product and engineering teams and I'm looking for my next opportunity. Check out my resume and get in touch.

CSS dotted borders in IE

Freshness Warning
This article is over 16 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):

Recently Written

A framework for onboarding new employees (May 15)
There’s no single good way to onboard an employee that works for every role. Here's a framework for creating a process that you can adapt to each situation.
TV hosts as a guide for software managers (May 10)
Software managers can learn a lot from journalists or late night TV hosts and how they interview people.
The Improvement Flywheel (Apr 29)
An incredible flywheel for the improvement of a development team. Fix a few things, and everything starts getting better.
Managers and technical ability (Dec 26)
In technical fields, the closer you are to the actual work being done, the closer your skills need to resemble those of the people doing the work.
Dysfunctions of output-oriented software teams (Sep 17)
Whatever you call it, the symptom is that you're measuring your progress by how much you build and deliver instead of measuring success by the amount of customer value you create.
Evaluative and generative product development (Aug 30)
Customers never even talk to the companies that don't fit their needs at all. If the only product ideas you're considering are those that meet the needs of your current customers, then you're only going to find new customers that look exactly like your current customers.
Product Manager Career Ladder (Aug 19)
What are the steps along the product management career path?
Building the Customer-Informed Product (Aug 15)
Strong products aren't composed of a list of features dictated by customers. They are guided by strong visions, and the execution of that vision is the primary focus of product development.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2020 Adam Kalsey.