How to change the thickness of hr tag using CSS ? - GeeksforGeeks

21 Oct, 2021
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.
bhaskargeeksforgeeks
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Form validation using jQuery
Making a div vertically scrollable using CSS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript