It seems that Aaron Bassett has found a much easier way to get the 1px dotted borders in IE. You can see it here.

Step 1
Open an image editing software, I chose Photoshop, and make 3 transparent GIF or PNG images like the ones bellow:

right_dot.gif
size: 1×2

bottom_dot.gif
size: 2×1

topleft_dot.gif
size: 2×2

Step 2
This is the CSS part. Just create 3 classes for the DIVs which will get you the needed borders. Here’s how the classes should look like:

.right-border{ margin: 0; padding: 0 1px 0 0; background: url(right_dot.gif) repeat-y 100% 0%; } .bottom-border{ margin: 0; padding: 0 0 1px 0; background: url(bottom_dot.gif) repeat-x 0% 100%; } .topleft-border{ margin: 0; padding: 1px 0 0 1px; background: url(topleft_dot.gif) repeat 0% 0%; } p{ background: #ffffff; /* It’s necessary to give the dotted bordered element a background color */ }

Step 3
Last thing were going to do is put this piece of code around the element that we want to have dotted borders:

<div class="right-border"> <div class="bottom-border"> <div class="topleft-border"> <p>Here's how you can have dotted borders</p> </div> </div> </div>

TIP
If you want to apply the borders to an image you’ll notice that the DIV will be wider than the image itself. To fix that you can add to the right-border class the float: left; property and afterwards add to the class of the element that succeeds the right-border DIV the clear: both; property.

Example

I know this is not what you’ve been dreaming for, but if you hate dashed borders and you need to have dotted ones in all browsers this is one way you can do it.