2

I can make a single CSS dashed border, as shown below, but how would the top and side borders be made?

Yes, border: dashed would do it, but the problem is that the dash renders differently in Chrome, IE, FF, etc., so I am in search of a universal cross-browser style declaration with control over dash thickness, as well as spacing and length, and started out below with one border.

HTML:

<div class="box"></div>

CSS:

.box {
    height:95px;
    margin-top:6px;
    padding-top:10px;
}

.box:hover {
    color:#2200dd;
    height:101px;
    margin-top:0px;
    background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%) repeat-x left top, left bottom;    
    background-size: 60px 6px;
}
Harry
  • 87,580
  • 25
  • 202
  • 214
Guessed
  • 417
  • 1
  • 4
  • 15
  • Why not just use the CSS `border` property? http://www.w3schools.com/css/css_border.asp – bnahin Jul 09 '15 at 03:53
  • 1
    @bnahin: That would not allow control over the size of the dashes or space in between them. – Harry Jul 09 '15 at 03:56
  • @Guessed: You would have to use multiple gradients and change the direction of the gradient (towards bottom) and the positioning of it (instead of `left top` and `left bottom`). – Harry Jul 09 '15 at 04:00
  • @Harry - I think that's what I am after - How would multiple gradients be declared? – Guessed Jul 09 '15 at 04:04
  • 1
    @Guessed: Have a look at my snippet [here](http://stackoverflow.com/questions/28365839/dashed-border-animation-in-css3-animation/28366181#28366181). Not posting an answer because it would look like a dupe. – Harry Jul 09 '15 at 04:11
  • 1
    @Harry Very cool. Thank you. – Guessed Jul 09 '15 at 04:13

3 Answers3

1

Why not just use the border property? 

.box:hover {
    border: 5px dashed #2200dd;
}

https://jsfiddle.net/tph7515v/

Zsw
  • 3,920
  • 4
  • 29
  • 43
  • Yes, this is correct, but it is my fault for not having clarified that I need control over dash spacing and length, so I updated my question and title to reflect this. – Guessed Jul 09 '15 at 04:17
0

Use the border property. CSS:

border: 5px dashed black;
  • Yes, this is correct, but it is my fault for not having clarified that I need control over dash spacing and length, so I updated my question and title to reflect this. – Guessed Jul 09 '15 at 04:16
-1

A simple border CSS would already achieve your desired output

.box {
    height:95px;
    margin-top:6px;
    padding-top:10px;
}

.box:hover {
    border : 10px dashed blue
}
jpcanamaque
  • 1,049
  • 1
  • 8
  • 14
  • Yes, this is correct, but it is my fault for not having clarified that I need control over dash spacing and length, so I updated my question and title to reflect this. – Guessed Jul 09 '15 at 04:16