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.
