Horizontal line
with variable dash length

Question

how to create the horizontal line with dash length as shown in image using CSS. This is what i've tried

CSS

hr{
border-bottom: 1px dotted grey;
}

but i am unable get the same stroke length as shown in the image.

Possible duplicate of [horizontal line and right way to code it in html, css](http://stackoverflow.com/questions/14821087/horizontal-line-and-right-way-to-code-it-in-html-css) — mikus, Oct 28 '15 at 13:27

score 1 · Answer 1 · answered Oct 28 '15 at 12:40

1

Try the below code: Use border css property.

hr{
    border: 1px dashed #ccc;
}

<p> hello </p>
<hr/>

answered Oct 28 '15 at 12:40

Shahzad Barkati

i've used the same code but,i need the dash length to be large. – Raviteja Oct 29 '15 at 06:30
@Raviteja, go through this: http://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes – Shahzad Barkati Oct 29 '15 at 07:07

score -1 · Answer 2 · answered Oct 28 '15 at 12:39

-1

try border-bottom : 1px dashed;

This is such an easy "google search". Do some work before you come and ask questions.

answered Oct 28 '15 at 12:39

Chaze

i've already done my work @Chaze and unable to get the dash length like that – Raviteja Oct 29 '15 at 06:28

2 Answers2