How to draw a dotted line with CSS?

Spread the love

Sometimes, we want to draw a dotted line with CSS.

In this article, we’ll look at how to draw a dotted line with CSS.

How to draw a dotted line with CSS?

To draw a dotted line with CSS, we set the border property of the hr element.

For instance, we write

before
<hr />
after

to add the hr horizontal line element between 2 pieces of text.

Then we write

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

to set the border to make it a dotted line.

We remove its default border with border: none;.

Conclusion

To draw a dotted line with CSS, we set the border property of the hr element.

Leave a Reply

Your email address will not be published. Required fields are marked *