CODEWITHSUNDEEP
cssborder
Ansichtssache
Ansichtssache

Reputation: 111

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!

Upvotes: 5

Views: 16142

Answers (4)

Arun K
Arun K

Reputation: 25

If you need only the bottom border, you could try the following css 

.class:after {
    content: '–⋅–⋅–⋅–⋅–⋅–';
    display: block;
    position: absolute;
    top: 30px;
    left: -4px;
    font-size: xx-large;
    font-weight: bolder;
    color: #59defc;
    height: 12px;
    overflow:hidden;
    width: 130px;
}

Please note that the dashes in the above code are special unicode characters and are not the ones on the english keyboard (those dots and dashes wont align on the same line).

Please change the pixel properties values to match your need. I found all these properties are needed to get the same behavior across multiple browsers.

@vals solution will work but with inconsistent results across browsers especially IE stretches the dashes.

Upvotes: 0

Luke Gedeon
Luke Gedeon

Reputation: 902

I needed something very close to this and came up with a variation of vals' solution. This uses a continuous solid line instead of dashes, but I am showing it here because it removes the need for position: absolute on the main div.

.dash {
    background: none;
    position: relative;
    box-shadow: inset 0 0 0 1px #fff,
                inset 0 0 1px 1px #000;
}

.dash:after {
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    left: 0px;    
    top: 0px;
    position: absolute;
    border: dotted 3px #bbb;
    border-left: 3px solid white;
    border-right: 3px solid white;
}

Upvotes: 0

vals
vals

Reputation: 64164

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

Upvotes: 8

Matt Becker
Matt Becker

Reputation: 2368

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

Upvotes: 3

Related Questions