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.


Comments for CSS dotted borders in IE

Excerpt: One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. Here’s how you can fix that. Read the whole article…

kevin c smith
July 23, 2003 11:39 AM

FWIW, the Mac version of IE5.x correctly displays dotted borders.

Adam Kalsey
July 23, 2003 11:49 AM

That's good to know. I suppose if you wanted you could change the second rule to read... /* \*/ * html .hr { border-bottom: none; padding: 1px; background: url(/images/css-dotted.gif) repeat-x bottom; } /* */ ... to hide it from Mac IE 5 using the escaped comment hack ( ).

July 24, 2003 10:40 PM

IE is probably putting some text in the box when you give it a height - you could also try font-size: 1px; instead of using padding, and see if that makes it behave.

July 24, 2003 10:51 PM

"One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders." I discovered that Internet Explorer DOES display dots if you set the border width higher than 1px...not pretty dots, mind you, but dots nonetheless. You can see them in action on a site I'm working on,

July 25, 2003 12:54 AM

To prevent IE from automatically putting a 1-line height inside the hr you can add the following rule: overflow: hidden;

Didier Hilhorst
July 25, 2003 9:53 AM

Nice work! A few months ago I came across the same problem concerning the misinterpretation by Internet Explorer of a height value. Being rather surprised by this behavious I did some testing. To some degree I found a workaround. Alas, it only worked for heights that or not inferior to 3 pixels. You can view the results at:

Didier Hilhorst
July 25, 2003 10:01 AM

Oh well, seems my example is outdated already. Xiven must've posted while I was writing mine. Using his suggestion (overflow: hidden;) the IE height problem is solved. Nice!

Trackback from JayAllen - The Daily Journey
July 25, 2003 10:17 AM

CSS dotted borders in IE

Excerpt: Adam Kalsey comes up with a nice hack for dotted borders in IE.

Brett Merkey
July 25, 2003 10:41 AM

Yes, IE insists on that default height. I normally deal with this by setting line-height:1px

tim martens
July 25, 2003 12:16 PM

While this is certainly a nifty trick, it's not really a "border" solution as the article title suggests. It's actually a spin on existing horizontal rule hacks. Wouldn't it be great if we could actually have dotted borders in IE that run around and entire block element's perimeter? We'll have to come up with another hack, cause M$ sure as heck won't be addressing this and the myriad IE CSS woes anytime soon (if ever).

July 25, 2003 12:42 PM

If you're willing to settle for a border of width 2 or greater, IE will make dots instead of lines. I'm not sure why 1px dotted borders look dashed, but I always assumed that it was a "feature" they had done on purpose, maybe under the assumption that 1px dotted borders look bad.

July 25, 2003 12:46 PM

Excellent! I must say nothing is more ugly than dotted lines representing themselves as the elegant dotted.

July 25, 2003 12:47 PM

Yikes! That should read "dashed lines representing themselves as the elegant dotted!"

July 25, 2003 2:17 PM

Wouldn't Tantek Celik's box-model hack let you insert this sort of thing as well, slipping IE-only CSS code past the "good" browsers?

Adam Kalsey
July 25, 2003 3:16 PM

The box model hack only hides from IE 5 and 5.5 on Windows. IE6 is immune to it.

July 26, 2003 5:02 AM

Ah, yes. Except if you include the "<xml?>" declaration, oddly enough. Thanks for setting me straight.

Trackback from Webspiffy
July 27, 2003 10:33 PM

Dotted 1px Borders in Internet Explorer

Excerpt: Adam Kalsey wrote an awesome article called "CSS dotted borders in IE" which explains how to get Internet Explorer to properly render borders with a 1px dotted declaration. The fix is the star-html hack which enables you to write CSS...

July 29, 2003 5:53 PM

Ok, how about the dotted links?

July 29, 2003 7:59 PM

using this hack means that I can't assign another background for the DIV anymore...? or is there a workaround?

Adam Kalsey
July 29, 2003 8:10 PM

If you wanted to have your links underlined with a dotted line, you can do the same thing, but instead set your link decoration to none and apply these dotted rules to the A tag.

Adam Kalsey
July 29, 2003 8:12 PM

To add another background, you'd have to nest two divs. One for the background and one for the border. Once CSS3 is widely available, though, you'll be able to do multiple backgrounds on a single div.

August 5, 2003 8:48 AM

All hail ::outside. All hail ::outside.

Joaquin Menchaca
August 23, 2003 6:33 AM

Thank you. This article is really well written and informative. I'm not interested in dotted borders at this point, but the hiding of W3C CSS from MS because MS pukes on it was valuable, and the star hack is great, as well as the escaped comment hack. I found a problem with having transparent borders, which IE doesn't seem to understand the word transparent. I highlight images with links using ridged borders, and I need transparent borders to preserve the layout. With this, I just shut the feature off. Thanks a million...

Trackback from Blog-Fu
September 2, 2003 7:59 AM

CSS Dotted Borders in IE

Excerpt: The Kalsey Consulting Group has come up with a neat solution again. CSS dotted borders in IE using the standard CSS rules doesn’t work. IE uses dashed borders instead of dotted borders when using border: 1px dotted #000;. They have...

September 30, 2003 7:31 PM

can you put that webtrek game back on it was the bomb but make it for everyone to use please it is boo oo with out that game.

Trackback from Chatter
October 3, 2003 12:58 PM

IE .hack

Excerpt: IE doesn't support 1px dotted CSS borders. There is a work-around.

Trackback from News
October 31, 2003 2:02 AM

Dotted Lines in IE

Excerpt: One of the many irritating things about CSS support in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. Unless they are bigger than 1px. Kalsey Consulting Have come up with a nice hack....

December 4, 2003 5:46 PM

This is all very nice. But what if I need all 4 borders (top, left, bottom, right) to be displayed correctly, for example around a DIV_?

Trackback from or die();
December 16, 2003 2:43 AM

Persoalan "Dotted" di IE

Excerpt: Menampilkan batas pinggir (border) dengan jenis dotted ternyata menjadi masalah dengan perambah (browser) Microsoft IE. Terutama berupa batas yang mengelilingi bentuk kotak. Hasil yang sudah terlihat halus di Mozilla menggunakan jenis paling tipis, de...

Trackback from TOXICO
July 27, 2004 5:17 PM

border-[top|right|bottom|left]: 1px dotted; en IE

Excerpt: Si veis mi página desde IE, y os fijais en los acrónimos o en los bloques de texto citado, vereis que el borde inferior de los primeros, y el superior del párrafo fuente de los últimos se ve punteado y no rallado. Para ello uso dos reglas, una gener...

March 26, 2005 9:51 AM

Now there is a way to display dotted borders all the way around objects for all browsers. Check out this link for more info.

April 4, 2005 7:06 AM

"I needed a way of creating a rule that would only work in IE." Easy, since IE also supports '=' as a separator btw name and value in a css declaration: { border-style : blah for Others; border-style = blah for IE; }

June 29, 2005 8:02 AM

Just to let you know: #content{ border-right-style: dotted; border-right-color:#cccccc; border-right-width:thin; } Works like a charm in IE

July 15, 2005 4:58 AM

Your tip with the background-image works very well for me. very nice!

October 12, 2005 11:13 AM

to Toms point: You can also define IE only styles using the "underscore hack" : margin: 12px; _margin: 12px; The underscored style will be read by IE, but ignored by good browsers.

January 6, 2006 7:50 PM

Steve: The problem with CSS hacks is when Microsoft works out some of its kinks in Internet Explorer 7, it may render some of these hacks useless thereby requiring you to fix them later on so best to employ conditional comments now to save you from the hassle.

January 9, 2006 8:10 AM

terrible no borders

January 10, 2006 10:00 PM

Hi there! The reason MSIE was making your DIV larger than the 1px you wanted, is that it's making space for text that isn't there. In other words, it assumes that the DIV contains at least one line of text, even when it doesn't. Just specify a font-size of zero, and it'll go away.

February 7, 2006 8:57 PM

maybe i am crazy, like becca - but i am using IE 6 and, well, i see no dotted borders on your page, near the comment section. i am of course, hoping that i am not really crazy - but it's a possibility.

March 8, 2006 12:01 PM

hola, por que no hacen las paginas compatibles tambien con IE se que es un navegador con muchos defectos pero por ser el que mas usan los usarios es necesario hacerlo compatible.. tal vez en algun momento cambien las cosas... saludos! yo uso fire fox & IE

Sean Sands
March 21, 2006 8:46 AM

I am attempting to apply this hack to a fieldset as well as a style for my nav and subnav. The hack doesn't seem to work well outside of your horiz rule situation, at least on my end. Can you offer an alternate solution or would you be willing to check my css to see what it is I'm doing wrong?

April 12, 2006 7:26 AM

Thanks ...ur dot border tutorial its work and easy to learn from here....nice work...

April 20, 2006 8:37 AM

Hi there, i think your article was stolen.

Adam Kalsey
April 20, 2006 10:22 AM

Emo: Sure looks that way.

June 8, 2006 2:01 PM

how about this: making a tag class:{ border-bottom: dotted 1px #fff; padding:5px; margin:0; } works in all browsers.

Bryan Chalker
June 30, 2006 1:15 PM

Emo and Adam...actually the ENTIRE (design) was stolen from Boagworld (, which is a run by Paul Boag, a respected and reputable standards flag-bearer. I'd be surprised if any of bobscape content is original.

July 13, 2006 7:16 PM

Actually, to make it the same in all browsers you have to get rid of the other borders in Mozilla and Opera. With: hr{ border-bottom: dotted 1px #fff; padding:5px; margin:0; } You still see three ugly borders and also it doesn't act the same way as in IE with the padding and margin as well(my version at least). I used this: hr { border:none; border-bottom: dotted 2px #CCCCCC; width:85%; background-color:#FFFFFF; color:white; } Also who cares if his stuff was posted somewhere else? It'd make me a little fidgety to use the word "I" when posting something like this if I didn't make it but what have you done on the internet that is original? Nothing... enjoy your horizontal rules.

July 17, 2006 4:34 PM

I'm actually having a sort of similar problem, except it's with roll-over css images and an Internet Explorer's inability to recognize the hover command for a class/id for a div background.

chris (another one)
August 7, 2006 12:55 AM

when we have a group of words, but shown on two lines because of lack of space, only the second line is underlined actually. How can we improve it so the first line is also underlined?

August 17, 2006 5:08 AM

A variation on this - if you make the coloured pixed in css-dotted.gif transparent, you can assign a css background-color value, and make the dotted border any colour you wish.

April 5, 2007 9:31 AM

IE 7 draws dotted borders around .

April 5, 2007 9:32 AM

... table elements, that is.

April 11, 2007 8:08 AM

The reason that IE renders an minimum height for an element has something to do with the font-size and the line-height. If you set both to zero you can give the div any height you like :) My experience is that Mozilla/Firefox acts the same way.

Abu Aaminah
April 27, 2007 4:41 AM

Is there a javascript solution which doesn't need images? That would be much more useful for us.

May 2, 2007 10:33 AM

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

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?

December 6, 2007 1:10 AM

Very useful information. Thanks !

March 10, 2008 9:49 AM

This solved my pesky little problem. Thanks!

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; }

April 15, 2008 4:49 AM

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

April 16, 2008 12:52 AM

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

June 1, 2008 12:22 PM

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

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; }

January 22, 2009 4:27 AM

Thank You lasiman. i was looking 4 this code

April 19, 2010 4:09 AM

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

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...

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!

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;}

This discussion has been closed.

Recently Written

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?
How I use OKRs (Oct 13)
A description of how I use OKRs to guide a team, written so I can send to future teams.
Build the whole product (Oct 6)
Your code is only part of the product
Input metrics lead to outcomes (Sep 1)
An easy to understand example of using input metrics to track progress toward an outcome.
Lagging Outcomes (Aug 22)
Long-term things often end up off a team's goals because they can't see how to define measurable outcomes for them. Here's how to solve that.


What I'm Reading


Adam Kalsey

+1 916 600 2497


Public Key

© 1999-2024 Adam Kalsey.