How to change the color of horizontal line (<hr> element) using CSS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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>GeeksForGeeks</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 ChromeInternet ExplorerFirefoxSafariOpera Comment More infoAdvertise with us Next Article How to Change the Color of Link on Hover using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU 2 min read How to change background color when hover over li elements using CSS ? In this article, we will see how to change the background color of li (list item) on hover using CSS.The hover effect may be used to indicate interactivity or might just be there for aesthetic purposes, like highlighting different items in case of a list. Hover event can be styled using the :hover p 2 min read How to change the color of selected text using CSS ? The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h 1 min read How to Change the Underline Color in Tailwind CSS ? The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text. Syntax: The syntax for the tailwind underline and decoration-color classes is as 3 min read How to Change the Color of Bullets using CSS? Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency.1. Adding An Extra MarkupBy adding 2 min read How to Change the Border Color on Hover in CSS ? Border color in CSS defines the color of an element’s border. You can change the border color on hover using the :hover pseudo-class, allowing you to modify the border’s appearance when a user hovers over the element. Using CSS hover Pseudo ClassThe hover pseudo-class in CSS is a powerful tool that 1 min read Like