Search code examples
cssborder

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


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

enter image description here

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!


Solution

  • 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