Draw a Line in a div – HTML

HTML allocates the basic web page structure in a website, and different types of styling can be applied by utilizing CSS. It also has various styling properties used for drawing different shapes, including circles, squares, rectangles, lines, ovals, and many more. Furthermore, a line is one that is the most commonly utilized element that can be added in any form including vertically as well as horizontally in a container.

This post will specifically discuss the following methods:

• Method 1: How to Draw a Line in a div Using the “border-bottom” Property?
• Method 2: How to Draw a Line in a div Using the “<hr>” Tag?

Method 1: How to Draw a Line in a div Using the “border-bottom” Property?

To draw a line in a div, you can use the “border-bottom” property, which hides all sides except the border’s bottom.

To apply this approach, check out the given steps.

Step 1: Create a div Container

First, create a div container with the help of the “<div>” tag and insert an “id” attribute with a name according to your choice.

Step 2: Add Heading

Next, add a heading by utilizing any heading tag from “<h1>” to “<h6>”. For instance, we have used the “<h1>” tag for adding the level one heading.

Step 3: Create Another div Container

Now, create another div container by following the same procedure:

Output

Step 4: Style “main-div” Container

Access the div container by using the id selector “#” and the name of the “id”. Then, apply the CSS properties for further styling:

Here:

• “color” property is utilized for specifying the color of the selected element.
• “text-align” property aligns the added text in the “center”.
• “margin” defines space for the element’s outside.

Step 5: Style “line-div” Container

Then, access the second div container and apply the following CSS property to get the desired output:

According to the above code snippet:

• Set the “width” value for allocating the width of the element content area.
• “height” property defines the element size vertically.
• “position” specifies the type of positioning method utilized for an element
• Last but not least, “border-bottom” defines the width, line style, and color of the bottom border of a box.

It can be observed that we have successfully added a line at the bottom of the div:

Method 2: How to Draw a Line in a div Using the “<hr>” Tag?

In HTML, the “<hr>” tag represents a horizontal rule that defines a thematic break in the page. More specifically, this tag can be utilized for drawing a line in a div without using the CSS properties.

To draw a line in a div container using the <hr> tag, try out the instructions below.

Step 1: Create a <div> Container

Initially, create a div container with the help of the “<div>” tag. Also, add a class with a name inside the “<div>” opening. Then, add a heading by using the “<h1>” tag.

Step 2: Insert “<hr>” Tag to Draw a Line

After that, insert the paragraph tag “<p>” and add the “<hr>” tag inside the <p> tag. Moreover, you can also specify the color inside the hr tag:

Output

Step 3: Apply CSS Properties to “line” Container

Then, access the “line” container using the dot selector and style it accordingly:

Here, we have applied the “height”, “width” and “margin” properties to the selected div.

Output

It can be observed that a line has been drawn using the <hr> tag in HTML.

Conclusion

To draw a line in a div, HTML users can either utilize the “<hr>” tag or the “bottom-border” CSS property. In the first approach, the CSS property “bottom-border” hides all sides of the border except the bottom of the border. For the second approach, you must specify only the “<hr>” tag for creating a horizontal line without using CSS properties. This post has demonstrated how to draw a line in a div using two different methods.