How to make dashed line using HTML and CSS

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.


    <hr class="dashed-line">     


.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.


make dashed line in html

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.


background-image: repeating-linear-gradient(
  angle | to side-or-corner,

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).


    <div class="line"></div>


.line {
  margin: 5px 0;
  height: 5px;
  background: repeating-linear-gradient(
    to right,
    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.


make dashed line in html


Edit l17g7s

💾 Recommended Articles