How to change hr color using CSS?
The <hr> is an HTML tag that stands for “Horizontal Rule.” To change the hr color, you need to write some CSS. By default, it gets style from the browser. In this post, I will show you how to change <hr> tag color, how to add a gradient border to it, and how to increase its thickness.
How to style the <hr> tag using CSS?
There are various ways you can make a custom style for this <hr> tag. See a couple of them below.
Change the color of the hr tag
Lorem ipsum dolor sit amet consectetur adipisicing elit accusantium beatae cum sapiente. Example 1 & 2 ↓
Architecto laudantium vitae reiciendis quas error ut cum asperiores vero numquam soluta eius ducimus. Example 3 ↓
Consectetur adipisicing elit atque repellendus ipsasint maxime ducimus corrupti soluta architecto laudantium.
For the above example, see my CSS below:
hr {
// method 1
border: 0;
border-top: 2px solid #009A68;
// method 2
border: 0;
height: 2px;
background-color: #009A68;
// method 3
border: 0;
border-top: 2px dashed #009A68;
}In this example, I have 2 pixels border or height of the <hr> tag. But you can go with 1 pixel or whatever you like.
However, in method 1, I used the border-top property to change the color.
In method 2, I hid the border and then added a 2-pixel height and a background color.
Method 3 is the same as method 1 and I am just changing the type of the border which is dashed.
Change hr color to a gradient
Lorem ipsum dolor sit amet consectetur adipisicing elit accusantium beatae cum sapiente. Example ↓
Architecto laudantium vitae reiciendis quas error ut cum asperiores vero numquam soluta eius ducimus.
For this <hr> gradient color, I have the following CSS:
hr {
border: 0;
height: 5px;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#32a852),
to(#fc2b23)
);
background-image: linear-gradient(90deg, #32a852, #fc2b23);
border-radius: 5px;
}In the above example, I used the background-image property to make the gradient color.
Increase the thickness of your hr tag
Aside from changing the color, in some cases, you may need to increase or decrease <hr> thickness. See the example below.
Lorem ipsum dolor sit amet consectetur adipisicing elit accusantium beatae cum sapiente. Example ↓
Architecto laudantium vitae reiciendis quas error ut cum asperiores vero numquam soluta eius ducimus.
For this example, I have the following CSS:
hr {
border-top: 12px solid #009a68;
border-radius: 5px;
}
/* OR */
hr {
border: 0;
height: 12px;
background-color: #009a68;
border-radius: 5px;
}You can use any one of them.
Do you need web design help? Feel free to reach out.
I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.