February 25th, 2006

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.
They can go
on any side,
with any
in any colour,
in a variety
of styles.

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.

Look at me. I am so elegant.


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.