Open In App
Related Articles

HTML <hr> color Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML <hr> color Attribute is used to specify the color of a Horizontal rule. This attribute accepts color values in various formats, including color names, hexadecimal codes, or RGB values.

The ‘color’ attribute enables you to personalize the visual presentation of the horizontal rule, introducing a unique color tone to delineate different content sections.

Note: It is not supported by HTML5.

Syntax: 

<Hr color= "color_name | hex_number | rgb_number"> 

Attribute Values: 

Attribute Values

Description

color_name

It sets the Text color by using the color name. For example “red”.

hex_number

It sets the text color by using the color hex code. For example “#0000ff”.

rgb_number

It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)”.

Example: The implementation of color attribute with <hr> tag

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML hr color Attribute
    </title>
</head>
 
<body style="text-align:center;">
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h2>
      Hr color attribute
      </h2>
    <hr width="500px;" color="red" size="10">
 
    <p>Computer science portal</p>
 
    <hr width="70%" size="20" color="blue" noshade>
</body>
 
</html>

                    

Output: 

Screenshot-2023-12-19-153741Example 2: The implementation of color attribute with <hr> tag

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            color: #424242;
            margin: 0;
            padding: 20px;
        }
 
        h2 {
            margin-bottom: 20px;
        }
 
        hr {
            border: 2px solid #e74c3c;
            width: 50%;
            margin: 20px auto;
        }
    </style>
</head>
 
<body>
    <h1 style="color: #4CAF50;">
        GeeksforGeeks
    </h1>
    <h2>HR Color Attribute Example</h2>
 
    <hr>
 
    <p style="color: #555;">
        Your go-to computer science
        portal for knowledge and insights
    </p>
 
    <hr>
 
</body>
 
</html>

                    

Output:

Screenshot-2023-12-19-154343

Supported Browsers

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


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