HTML <hr> color Attribute
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:
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:
Example 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:
Supported Browsers
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 12.1
- Safari 1
Last Updated :
12 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...