How to change the thickness of <hr> tag?

Learn about the <hr> tag, and how can we change its thickness?
Submitted by Apurva Mathur, on August 03, 2022

What is <hr> tag?

The <hr> refers to horizontal rule. We use this tag whenever we want to show the break in the page or we want to include some horizontal line.

HTML code to display <hr> (Horizontal Rule / Line)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hr tag</title>
  </head>
  <body>
    <div>
      Nobody can go back and start a new beginning, but anyone can start today and make a new ending.
      <hr>
      Many of life's failures are people who did not realize how close they were to success when they gave up
    </div>
  </body>
</html>

Output:

Example 1: Change the thickness of HR tag

As we can see this horizontal line is very thin, to increase the thickness and customize this line according to the requirement.

Change the thickness of the <hr> tag

The property which will affect the thickness is height. Giving appropriatevalue to the height will increase/decrease the thickness.

Code to change the thickness of <hr> tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hr tag</title>
  </head>
  <body>
    <style>
      hr{
      background-color: darkcyan;
      height: 20px;
      }
      .hr1{
      background-color: blueviolet;
      height: 80px;
      }
      .hr2{
      background-color: deeppink;
      height: 50px;
      }
    </style>
    Nobody can go back and start a new beginning, but anyone can start today and make a new ending.
    <hr>
    Many of life's failures are people who did not realise how close they were to success when they gave up
    <hr class="hr1">
    Nobody can go back and start a new beginning, but anyone can start today and make a new ending.
    <hr class="hr2">
    Many of life's failures are people who did not realise how close they were to success when they gave up
  </body>
</html>

In the given code I've simply provided some value to the height with the background color, as result, you'll see the variation in thickness.

Output:

Example 2: Change the thickness of HR tag

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.