Grow your CSS skills. Land your dream job.

Border dotted 5px in browsers – the differences!

  • # June 20, 2009 at 9:07 am

    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]

    # June 20, 2009 at 11:54 pm

    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.

    # June 21, 2009 at 11:47 am
    "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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".