How to Customize the Thickness of HR Tag in HTML

  2. HowTo
  3. HTML Howtos
  4. How to Customize the Thickness of HR Tag …
Aimen Fatima Feb 02, 2024
HTML HTML Tag
  1. the hr Tag in HTML
  2. Insert the Horizontal Rule in HTML
  3. Customize the Horizontal Rule in HTML
How to Customize the Thickness of HR Tag in HTML

This article explains the <hr> tag in HTML. We will also explain the attributes of the <hr> tag and its customization, i.e., change in thickness, color, and opacity in CSS.

We will demonstrate by creating an HTML project and implementing the <hr> tag.

the hr Tag in HTML

The <hr> tag in HTML enables you to add a thematic break or a horizontal rule to separate or split document parts.

Appropriate CSS is required to customize it. It doesn’t require an end tag. Its basic syntax is as follows:

<hr property: value;> ...

Attributes:

  1. align: This attribute can align the horizontal line on the page. Left, center and right are possible values for the align property.
  2. noshade: It specifies the line to have no shading effect.
  3. size: It specifies the height of the horizontal line.
  4. width: It specifies the width of the horizontal line.
  5. color: It specifies the color of a horizontal line.

a Practical Example to Learn hr Tag Functionalities

Let’s create a sample HTML project to implement the <hr> tag. Open any HTML editor supported by your OS such as Notepad/Notepad++ (PC), or TextEdit (Mac).

Write the following simple code of HTML in the editor, save the file as Filename.html, and open the saved file in any supported web browser.

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

Output:

Insert the Horizontal Rule in HTML

Set a horizontal break between the heading and paragraph by inserting the <hr> tag in the source file.

Copy the following code snippet to the HTML file created above.

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <hr>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

Output:

A horizontal line will be displayed between the heading and paragraph. This bar will have default values of color, size, width, align.

Customize the Horizontal Rule in HTML

The attributes (align, color, size, width, noshade) can be customized according to the desired output. CSS must be used to modify the appearance of the horizontal rule in the document.

The height property of <hr> specifies the thickness of the bar. The visibility of the bar can be set by using the opacity attribute.

For example, if someone wants a bar that is not much prominent in the document, the opacity value must be less than 1.

the Thickness of the Horizontal Rule

The height property of CSS is used to specify the thickness of the horizontal rule. The minimum value is 1px for height.

Following is the code snippet of the CSS style sheet.

hr {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }

The top attribute specifies the gap between the horizontal line and the top of the document. Background in CSS is the alternative to HTML’s color attribute.

It specifies the color of the bar. The complete code to demonstrate these properties is as follows:

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>

<p>Paragraph to split.</p>
</center>
</body>
</html>

Output:

the Opacity of the Horizontal Rule

The opacity attribute in CSS specifies the transparency of the horizontal rule. Opacity value 1 shows no transparency, while opacity value 0 shows complete transparency.

Following is the syntax of the opacity attribute.

hr
{
    background-color: gray;
    opacity: 0.5;

}

Example:

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class3{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
        opacity: .25;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>
<hr class=class3>

<p>Paragraph to split.</p>
</center>
</body>
</html>

Output:

Related Article - HTML Tag