Advertisements
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.
Example
Try this code »<!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:
- How to create triangle or caret icons using CSS
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to remove outline around text input boxes in chrome using CSS
Advertisements