In this article, we will see how we can make a dashed line using HTML and CSS.
Here, we will make dashed line using < hr > and < div > tags with come help of CSS styling.
Method 1 : Using hr tag and CSS
Here, we will use the < hr > tag that creates a horizontal line. And then we will add a class name to it and use border property to create the dashed line.
HTML
<body>
<hr class="dashed-line">
</body>CSS
.dashed-line {
border: 2px dashed red;
}Here, we have added a class dashed-line and added a border of 2px dashed with the color red.
Result:
Method 2 : Using repeating-linear-gradient in CSS
We can also use the repeating-linear-gradient() function with the background CSS property to create a gradient line with dashed pattern on our HTML website.
The repeating-linear-gradient() function is used to create an image that repeats a linear gradient.
We can use this repeating gradient to create a dashed line in HTML.
Syntax:
background-image: repeating-linear-gradient(
angle | to side-or-corner,
color-stop1,
color-stop2,
...
);angle | to side-or-corner : degree and direction of the linear gradient.
color-stop : Color values with one or two stop positions (given in percentage or length along the gradient’s axis).
Example:
<body>
<div class="line"></div>
</body>CSS
.line {
margin: 5px 0;
height: 5px;
background: repeating-linear-gradient(
to right,
transparent,
transparent 10px,
black 10px,
black 20px
);
/*10px transparent then 10px black -> repeat this!*/
}In the code above, the transparent color is from 0 to 10px and the black color starts from 10px and stops at 20px. And since it’s repeating itself, it will create a dashed line on our html page.
Result:
DEMO:
