How to draw dashed line using html and css

user_10287664 0
Viewed 15864

How to draw dashed line using html and css as below. Not the dotted line.

"--------------------------------------------------"

Can use this border: 1px dashed. But need to increase the length size of the dash.not the width

css html
1 Answers

Use repeating-linear-gradient and you can control size and spacing like you want:

.line {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px)
    /*5px red then 2px transparent -> repeat this!*/
}

.line1 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 3px,transparent 3px,transparent 7px)
    /*3px red then 4px transparent -> repeat this!*/
}

.line2 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(to right,red 0,red 10px,transparent 10px,transparent 12px)
    /*10px red then 2px transparent -> repeat this!*/
}
<div class="line"></div>
<div class="line1"></div>
<div class="line2"></div>

You can also have all of them in the same element using multiple background:

.line {
  margin:5px 0;
  height:20px;
  background:
    repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px) top,
    repeating-linear-gradient(to right,red 0,red 3px,transparent 3px,transparent 7px) center,
    repeating-linear-gradient(to right,red 0,red 10px,transparent 10px,transparent 12px) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}
<div class="line"></div>

user_86203330
Related