Skip to content
Related Articles

Related Articles

How to change the thickness of hr tag using CSS ?
  • Last Updated : 16 Apr, 2019

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 height property in CSS. Minimum height can be 1px since the smallest unit available is 1 pixel.
Images can be added to make hr tag more beautiful in appearance.

Example-1:




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




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




My Personal Notes arrow_drop_up
Recommended Articles
Page :