Border dotted 5px in browsers – the differences!

[lookslikepat]

I’ve seen this mentioned before, but this was too weird not to add in anyway.
Never. Design. Using. Borders. Only.
It’s 2009, and they still haven’t got a clue…

Code:

body {
background-color: #666;
background-image: url(/*a faded lighter circle*/);
}
#footer {
background: #D4CDC3;
border-top: 5px dotted #666;
}

Firefox 3
[img]http://elundmark.se/filer/5px-dotted-firefox3.png[/img]

Firefox 3.5 RC1
[img]http://elundmark.se/filer/5px-dotted-firefox3.5.png[/img]

Webkit (Chrome + Safari)
[img]http://elundmark.se/filer/5px-dotted-webkit.png[/img]

Opera 9.64
[img]http://elundmark.se/filer/5px-dotted-opera9.64.png[/img]

IE8
[img]http://elundmark.se/filer/5px-dotted-ie8.png[/img]

IE7
[img]http://elundmark.se/filer/5px-dotted-ie7.png[/img]

IE6
[img]http://elundmark.se/filer/5px-dotted-ie6.png[/img]

[Chris Coyier]

I think the most interesting thing is how the current versions of all the major browsers treat the "dot" as a different shape. I definitely think of a dot as a circle, so I’m with Fx.

[lookslikepat]

"chriscoyier" wrote:

…dot as a circle, so I’m with Fx.

"Agree, I do. But, the same rules, Never! the browsers follow will." – Wrinkly old master

[Author]

Posts