Skip to content
Related Articles

Related Articles

How to change the thickness of hr tag using CSS ?

Improve Article
Save Article
  • Last Updated : 21 Oct, 2021
Improve Article
Save Article

The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections.
The thickness of the hr tag can be set using the height property in CSS. The minimum height can be 1px since the smallest unit available is 1 pixel. Images can be added to make the hr tag more beautiful in appearance. It is an empty tag, and it does not require an end tag.

Syntax:

<hr property: value;> ...

Property value:

  • align: It is used to specify the alignment of the horizontal rule. The values are left, center & right.
  • noshade: It is used to specify the bar without shading effect. The default value is noshade.
  • size: It is used to specify the height of the horizontal rule. The default value is pixels.
  • width: It is Used to specify the width of the horizontal rule. The default value is pixels.
  • color: It is used to specify the color of a Horizontal rule. It is not supported by HTML 5.

We will utilize the above property values through the examples.

Example 1: This example shows the basic use of the  <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> Document </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>
    <center>
        <div>
            <h1>GeeksforGeeks</h1>
            <hr />
            <h3>A Computer Science Portal</h3>
          </div>
    </center>
</body>
</html>

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>
    <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>Document</title>
    <style>
    div {
        width: 200px;
    }
     
    body {
        background-color: #f0f0f0;
        width: 80px;
        float: center;
    }
     
    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:

Supported Browsers:

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 12.1
  • Safari 3.0

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!