WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Change the Color of an <hr> Element using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS background-color Property

You can simply use the CSS background-color property in combination with the height and border to the change the default color an <hr> element.

In the following example we've changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Color of hr Tag using CSS</title>
<style>       
    hr{
        height: 1px;
        background-color: #ccc;
        border: none;
    }
</style>
</head>
<body>
    <p>This is a paragraph</p>
    <hr>
    <p>This is another paragraph</p>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties