In web development, the user can trace lines in different styles, including plane lines, dash lines, dotted lines, and so on. Traditionally, dotted or dashed lines indicate anything that can be sketched or cut out. They have been connected in the past to placeholder or undeveloped material in digital environments. Additionally, these lines can denote locations for drag-and-drop operations and file uploads.
This write-up will explain the method for drawing a dotted line with CSS.
How to Draw a Dotted Line With CSS?
To draw a line in HTML, users can use the “<hr>” tag. The “<hr>” element draws a horizontal line on the web page. Furthermore, this line can be styled differently through CSS.
To draw a dotted line on the web page with CSS, try out the given procedure.
Step 1: Create a “div” Container
First, use the “<div>” tag to create a container in the HTML page. Then, add an “id” attribute within the “div” opening tag to access it later.
Step 2: Insert Text data
Next, embed text data in between the “div” container.
Step 3: Add “<hr>” Tag
Add a “<hr>” tag to insert a simple line in a webpage. Then, embed some text after the line:
Welcome to the Linuxhint Website
<hr>
Linuxhint LTD UK
</div>
It can be noticed that the line has been added successfully:
Step 4: Style “div” Container
Access the “div” container with the help of the “id” selector “#” and the value of the id as “#dotted-line”. After that, apply the below given CSS properties:
border: none;
color: rgb(7, 189, 245);
margin: px 60px;
}
Here:
-
- “border” adds a boundary around the element.
- “color” is used for specifying the color of the text inside the element.
- “margin” is utilized to add space outside the defined boundary.
Output
Step 5: Style “<hr>” Element
To make a list as a dotted line, first, access the “hr” element by tag name and apply the below listed CSS properties:
background-color: rgb(243, 192, 192);
border-top: 3px dotted rgb(10, 53, 245);
height: 3px;
width: 50%;
}
According to the given code snippet:
-
- “background-color” property specifies the color at the backside of the element.
- “border-top” is utilized for making the horizontal line dotted.
- “height” and “width” are used to determine the element’s size:
It can be observed that we have successfully drawn a dotted line.
Conclusion
To draw a dotted line with CSS, first, add a simple line with the help of the “<hr>” tag. Then, access the “<hr>” element by tag name in CSS. After that, apply the “border-top” or “border-bottom” property and specify its value as “dotted”. This post has explained the method for drawing the dotted line in HTML using CSS.
