Eliminate the double-dot.

I don't write about web design that often, but i found myself doing a little design recently and came across something i felt like mentioning in this journal. (I must say, CSS has got to be the ultimate drug for compulsive types who love to tweak every last detail of a page layout.)

Anyway, one of the nice and very widely used features of CSS is the ability to put borders around anything.

But by far the hippest style of border is indubitably the dotted border.

Dotted borders are everywhere. To wit: fancy-looking site #1, fancy-looking site #2, fancy-looking site #3.

They're so delicate, so understated, so subtle, oh yeah — they can make you, yes even you, look like such a hot shit designer.

Ahh.

The thing is, half of all dotted borders have this stupid turd at the end of them. Talk about ruining the party.

Check
it
out.
WTF
is
up
with
that?

There your eyes go, drifting serenely along the line, all of a nice uniform colour until splat! right at the end is this thing.

Hello. What's the matter with these browser people? This is not rocket science, folks. Let me explain it very slowly and in words of one syllable.

In an odd space, you draw a dot. In an even^* space, you don't.

(^*Oops, that must be the problem. "Even" has two syllables.)

I understand that the story gets more complicated when there are borders on multiple sides of varying thicknesses. But for a single dotted border, just one pixel wide, why couldn't they get it right? Sigh.

Anyway, let's get rid of this annoying defect. Once you start noticing it, you'll see it everywhere.

So far i've discovered one way to avoid it: add a 1-pixel solid border along the right, same colour as the background, to wipe out that extra dot.

Check
it
out
now,
funk
soul
brother.

Found any other ways? Please share them.