BlogRSS

How to make dashed line using HTML and CSS

•css•2 min read

Short tutorial to make dashed line in HTML using hr tag and CSS repeating-linear-gradient() function.

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

<u>HTML</u>

<body>
    <hr class="dashed-line">     
</body>

<u>CSS</u>

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

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.

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>

<u>CSS</u>

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

make dashed line in html

DEMO:

<a href="https://codesandbox.io/s/damp-butterfly-l17g7s?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit l17g7s" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>

Related Posts