How to add horizontal line in HTML ?

Last Updated : 22 Mar, 2024

Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines can help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, we’ll explore two effective methods to add horizontal lines in HTML: using the <hr> tag and CSS properties.

Different Approaches to Add Horizontal Line in HTML

1. Using <hr> tag:

The Horizontal Rule tag (<hr>) is used to insert horizontal lines in the HTML document to separate sections of the document. It is an empty or unpaired tag which means there is no need for the closing tag.

Example: This example describes the <hr> tag to add the horizontal line.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Horizontal line </title>
</head>

<body>
    <h2>Horizontal line using various attributes</h2>
    <hr width="100%" size="2">
    <hr width="100%" size="2" color="blue" noshade>
    <hr width="100%;" color="red" size="5">
</body>

</html>

Output:

Output

2. Using CSS Properties:

In this approach, we will be using the border-style Property to create the horizontal line. We can either use the border-top property that specifies the style of the top border or the border-bottom property, which can set the style of the bottom border of an element. Both properties can be used to add the horizontal line.

Example: This example describes the drawing of the horizontal line using the border-style Property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Horizontal line using CSS Properties</title>
    <style>
        .horizontal_line {
            width: 90%;
            height: 5px;
            border-top: 5px dotted black;
            line-height: 80%;
        }

        .line {
            border-bottom: 5px solid red;
            margin-top: 5px;
            width: 90%;
        }
    </style>
</head>

<body>
    <h2>Horizontal line using CSS Properties</h2>
    <h3>dotted horizontal line</h3>
    <div class="horizontal_line"></div>
    <h3>Plain horizontal line</h3>
    <div class="line"></div>
</body>

</html>