Open In App

How to change the thickness of hr tag using CSS ?

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. Its purpose is to divide or separate different sections of the document. To change the thickness of the hr tag, you can use the height property in CSS. The minimum height of the hr tag is 1px since this is the smallest unit available in pixels. Additionally, you can add images to make the hr tag look more visually appealing. It’s an empty tag, meaning it does not require an end tag.

Syntax:

<hr property: value ; >

Property values:

Property Values Description
align Specifies the alignment of the horizontal rule. Values can be left, center, or right.
noshade Specifies whether the bar has a shading effect. The default value is noshade, indicating no shading.
size Specifies the height of the horizontal rule. The default value is in pixels.
width Specifies the width of the horizontal rule. The default value is in pixels.
color Specifies 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 <hr> 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:

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 <hr> 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:

Screenshot-2024-01-16-144758

Supported Browsers:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 3


Last Updated : 25 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads