CODEWITHSUNDEEP
htmlcsscss-shapes
SSSS
SSSS

Reputation: 215

How to draw dashed line using html and css

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

Upvotes: 6

Views: 26847

Answers (1)

Temani Afif
Temani Afif

Reputation: 273071

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

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

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

.line2 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(90deg,red 0 10px,#0000 0 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(90deg,red 0 5px ,#0000 0 7px) top,
    repeating-linear-gradient(90deg,red 0 3px ,#0000 0 7px) center,
    repeating-linear-gradient(90deg,red 0 10px,#0000 0 12px) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}
<div class="line"></div>

Upvotes: 27

Related Questions