• Post category:HTML

How to Create a Dotted Line in HTML.

Dotted Line in HTML

In this article, we will see how to create a dotted line in HTML.

Step-by-step guide to creating a dotted line

Code:

<!DOCTYPE html>
<html>
<head>
<title>Dotted Line</title>
<style type="text/css">
.dot{
border: none;
border-top: 5px dotted black;
}
</style>
</head>
<body>
<hr class="dot">
</body>
</html>

Output:

dotted line in html

Steps:

  1. In the above HTML code, first, we have written the Basic Structure of HTML, and the title is set to “Dotted Line”.
  2. Then we have creatd <hr> tag with classname dot.
  3. We select the classname “dot” in CSS using a class selector. Inside the parentheses, we set the “border” property to none and the “border-top” property to 5px dotted black”.
  4. See the above output, the dotted line is displayed successfully.

Leave a Reply