1px dotted border in IE6

Era of IE6 is finally coming to an end and it may seem like we know all of the hacks, but people still find new ones quite often. So here's hack that makes possible 1px dotted borders. I've discovered it a while ago just didn't have time and place to share it until now.

<ul class="dottedBorders">
    <li><a href="#">Some link</a></li>
    <li><a href="#">Some link</a></li>
</ul>

Simple CSS for regular browsers:

.dottedBorders li {
    border-bottom: 1px dotted #000;
}

And for IE6 it's a little more complicated. IE6 renders 2px dotted borders just fine, so by using proprietary css property called "zoom" we can scale it down 2x times to make it 1px just as we need, but it will also scale all of the content inside this element. To prevent that we add 2x up zoom to element's child, thus canceling negative effect:

.dottedBorders li {
    border-bottom: 2px dotted #000;
    zoom: 0.5;
}

.dottedBorders li a {
    zoom: 2;
}
Social comments Cackle