How to create a "dot-dash" border with css or javascript?

Question

In css3, they plan to add a border-style called "dot-dash" that will look like this:

Unfortunately, that is not yet implemented in any browser, and I need that kind of border now for a web-app. The Application works with the Javascript-Framework ExtJS, so the solution of my problem can be a javascript one, too.

I already tried with a background-image (very bad solution, I know) - but that didn't work because there will be many divs with this border, which will all have different sizes (which I don't know before).

Thank you!

Answer 1

Well, if you don't have it, make it by yourself !

The recipe for a dash-dot: 1 part of dash and 1 part of dot:

#dash {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: lightblue;
    border: dashed 6px red;
}

#dash:after {
    content: '';
    width: 100%;
    height: 100%;
    left: -6px;    
    top: -6px;
    position: absolute;
    border: dotted 6px red;
}

demo

Answer 2

It'll probably be supported by all browsers in the future, but as of now, I don't think it's a supported border type. Here's a test page someone made with the different border types: http://www.aaronsw.com/2002/testcss

You'll probably have to use a border image like Kyle suggested. http://www.w3schools.com/cssref/css3_pr_border-image.asp

Although it looks like Internet Explorer doesn't even support that yet. Surprise!

Here's a workaround for IE: border-image: workaround for IE