Open In App

How to change the thickness of hr tag using CSS ?

Last Updated : 15 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The <hr> tag in HTML is used to create a horizontal rule or a thematic break in an HTML page. The thickness of the <hr> tag defines the height of the horizontal line. You can change it using the CSS height property.

Syntax:

<hr property: value ; >

Property values:

Property ValuesDescription
alignSpecifies the alignment of the horizontal rule. Values can be left, center, or right.
noshadeSpecifies whether the bar has a shading effect. The default value is noshade, indicating no shading.
sizeSpecifies the height of the horizontal rule. The default value is in pixels.
widthSpecifies the width of the horizontal rule. The default value is in pixels.
colorSpecifies the color of the horizontal rule. Note: Not supported by HTML5.

Example 1: Implementation of <hr> tag to insert a horizontal rule along with some CSS properties.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Changing &lt;hr&gt; tag thickness</title>
    <style>
        div {
            width: 300px;
        }

        h1,
        h3 {
            color: green;
        }

        hr {
            position: relative;
            top: 20px;
            border: none;
            height: 12px;
            background: black;
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <hr />
        <h3>A Computer Science Portal</h3>
    </div>
</body>

</html>

Output:


changing-the-thickness-of-hr-tag-using-CSS

changing the thickness of hr tag using CSS Example Output


Example 2: This example demonstrates the different styles of the horizontal rule or a thematic break in HTML.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Changing &lt;hr&gt; tag thickness</title>
    <style>
        body {
            background-color: #f0f0f0;
            width: 80px;
            float: center;
        }

        div {
            width: 200px;
        }

        hr.class-1 {
            border-top: 10px solid #8c8b8b;
        }

        hr.class-2 {
            border-top: 3px double #8c8b8b;
        }

        hr.class-3 {
            border-top: 1px dashed #8c8b8b;
        }

        hr.class-4 {
            border-top: 1px dotted #8c8b8b;
        }

        hr.class-5 {
            background-color: #fff;
            border-top: 2px dashed #8c8b8b;
        }

        hr.class-6 {
            background-color: #fff;
            border-top: 5px dotted #8c8b8b;
        }
    </style>
</head>

<body>
    <div>
        <hr class="class-1" />
        <br />
        <hr class="class-2" />
        <br />
        <hr class="class-3" />
        <br />
        <hr class="class-4" />
        <br />
        <hr class="class-5" />
        <br />
        <hr class="class-6" />
    </div>
</body>

</html>

Output:

changing-the-thickness-of-hr-tag-using-CSS-2

changing the thickness of hr tag using CSS

Supported Browsers:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads