Dashed border using css gradient

Question

I'm trying to find out how to add a dashed border that will look the same in the latest Firefox, Chrome, Safari and IE10+ browsers. Ordinary 1px dashed #000 doesn't work for me because it's different in all browsers, and image doesn't scale.

I'm trying to figure out how to do this by CSS gradient.

It would be cool if there is the possibility to control dash length.

Possible duplicate of [Control the dashed border stroke length and distance between strokes](http://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes) — secelite, Nov 08 '16 at 15:25
This may also help in understanding how dash + gradient can be produced - http://stackoverflow.com/questions/32500570/gradient-line-with-dashed-pattern/32501799#32501799 (not sure if you meant a dashed border created *using* gradient or a dashed border *with* gradient) — Harry, Nov 08 '16 at 15:33
Dashed border created with css gradient, will be more accurate next time, thanks. — Rantiev, Nov 08 '16 at 17:22

score 0 · Answer 1 · answered Nov 08 '16 at 15:22

0

You can use border-image for that:

div {
  width: 100px;
  height: 50px;
  border: 10px solid transparent;
      -webkit-border-image: url('http://www.w3schools.com/cssref/border.png') 30;
    -o-border-image: url('http://www.w3schools.com/cssref/border.png') 30;
    border-image: url('http://www.w3schools.com/cssref/border.png') 30;
  }

<div></div>

answered Nov 08 '16 at 15:22

Justinas

41,402
5
66
96

What about ie10-11? Will it work there? It's important. As i wrote, i dont want to use image, i used to cut an image of single dash in the past, but doent like that solution. – Rantiev Nov 08 '16 at 17:24
@Rantiev If you rely on browser default styles, than accept that styles may change depending on browser and OS – Justinas Nov 09 '16 at 06:51
I want to have the same dashed border done using gradient in the browsers list i provided. – Rantiev Nov 09 '16 at 07:56
@Rantiev Check this page: https://css-tricks.com/examples/GradientBorder/ – Justinas Nov 09 '16 at 09:16

Dashed border using css gradient

1 Answers1