How to change the color of horizontal line (hr element) using CSS ?
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 color of the <hr> tag can be set by using the background-color property in CSS.
Example 1: In this example, the CSS within the <style>
section customizes the <hr>
element with a red background, a height of 4px
, and no border.
html
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < style > hr { height: 4px; background-color: red; border: none; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > How to Changing the co lor of an hr element using CSS? </ h2 > < p >This is a paragraph</ p > < hr > < p >This is another paragraph</ p > </ body > </ html > |
Output:
Example 2: In this example, we have used CSS to change the color of a horizontal line (<hr>
element) to a specific shade of blue (#3498db
), with an optional border width of 2px
.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < style > /* Style for the horizontal line */ hr { border-color: #3498db; border-width: 2px; } </ style > < title >Colored Horizontal Line</ title > </ head > < body > < p >content above the colored horizontal line.</ p > < hr > < p >content below the colored horizontal line.</ p > </ body > </ html > |
Output:
Supported browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Contact Us