Q:

How to Change the Color of an hr Element using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  303 
Very Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

se 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>

If you're using the Bootstrap framework you can simply apply the class .list-unstyled on the <ul> or <ol> element. It removes the bullets (or list markers) as well as the left padding from the list items which are immediate children of the <ul> or <ol> element.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Auto-resize an Image to Fit into a DIV Cont... >>
<< How to Make a DIV Not Larger than its Contents usi...