How to add horizontal line in HTML ? (original) (raw)

Last Updated : 17 Jun, 2025

Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines 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

tag and CSS properties.

Different Approaches to Add Horizontal Lines in HTML

**1. Using
Tag

The **Horizontal Rule tag (

) is used to insert horizontal lines in the HTML document to separate sections of the document. It is an empty or unpaired tag, meaning there is no need for a closing tag.

**Example: This example describes the

tag to add a horizontal line.

index.html `

Horizontal line

Horizontal line using various attributes

**Output:

HTML horizontal line using hr tag

Output

**2. Using CSS Properties

In this approach, we will use the border-style property to create the horizontal line. You can use either the border-top property, which specifies the style of the top border, or the **border-bottom property, which sets the style of the bottom border of an element. Both properties can be used to add a horizontal line.

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