HTML <hr> color Attribute

Last Updated : 17 Sep, 2024

The HTML <hr> color attribute was used to specify the color of horizontal lines, adding visual separation in content. Although deprecated in HTML5, similar effects can be achieved using CSS by styling the <hr> element with border or background properties.

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: In this example demonstrates the deprecated <hr> color attribute to set colors for horizontal lines. The lines are styled with attributes like color, size, and width, although modern styling should use CSS instead.

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-153741 Example 2: In this example CSS to style <hr> elements with a custom color and width, aligning them centrally. It showcases modern methods for styling horizontal lines without using the deprecated <hr> color attribute.

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

HTML <col> bgcolor Attribute

manaschhabra2

Improve

Article Tags :

HTML <hr> color Attribute

Syntax

Attribute Values:

Supported Browsers

Similar Reads

Thank You!

What kind of Experience do you want to share?