There may not be a fix for this small issue, but I'm wondering if anyone has encountered it or a solution before...

When you apply a dotted or dashed border style to elements adjacent to each other, (table cells are a good example) you often find yourself with unsightly "joins" where the dots appear to merge with adjacent borders. Of course they aren't doing this, it's just an effect.

Is there any way to prevent the dots from doing this? Or a way of making them behave in an "intelligent" way, stopping in instances where joins are about to appear (the width of the element plays a part)? JS perhaps?

I've made this example page to show what I mean, if that's too confusing. The effect is even more prominent in IE6, but look carefully and you should see it in most browsers either way.

Thanks