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.
Let’s get started.
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.
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Make your hands dirty
Build HTML CSS projects
<table><tbody><tr><td><a href=“/about-page-template/”>About us template</a></td><td><a href=“https://shihabiiuc.github.io/aboutpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/team-page/”>Team page</a></td><td><a href=“https://shihabiiuc.github.io/team-members-section/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-template/”>Testimonial page</a></td><td><a href=“https://shihabiiuc.github.io/testimonialpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-slider/”>Testimonial slider</a></td><td><a href=“https://shihabiiuc.github.io/testimonialslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/contact-page-html-css/”>Contact page</a></td><td><a href=“https://shihabiiuc.github.io/contact-page/contact-us.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-multiple-page-website-html/”>Multipage website</a></td><td><a href=“https://shihabiiuc.github.io/multipagehtml/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/portfolio-website-design-with-html-css/”>Portfolio website</a></td><td><a href=“https://shihabiiuc.github.io/portfolio/index.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/animated-portfolio-website/”>Animated portfolio</a></td><td><a href=“https://shihabiiuc.github.io/animated-portfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/computer-science-portfolio-website/”>Computer science portfolio</a></td><td><a href=“https://shihabiiuc.github.io/computerscienceportfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-navigation-bar/”>Navigation bar (without JS)</a></td><td>N/A</td></tr><tr><td><a href=“/hamburger-menu/”>Create a hamburger menu</a></td><td><a href=“https://shihabiiuc.github.io/hamburger-menu/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-footer/”>Footer templates</a></td><td><a href=“https://shihabiiuc.github.io/footer-examples/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/hero-banner-image-using-html-css/”>Hero banner</a></td><td><a href=“https://shihabiiuc.github.io/herobanner/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/background-slider/”>Background slider</a></td><td><a href=“https://shihabiiuc.github.io/backgroundslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/how-to-create-3-column-layout-in-html-css/”>Three-column layout template</a></td><td><a href=“https://shihabiiuc.github.io/column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/two-column-layout-html-css/”>Two column layout</a></td><td><a href=“https://shihabiiuc.github.io/two-column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/thank-you-page-html-css/”>Thank you page</a></td><td><a href=“https://shihabiiuc.github.io/thank-you/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/resume-html-css/” data-type=“link” data-id=“http://localhost/shihabiiuc/resume-html-css/">Resume template</a></td><td><a href=“https://shihabiiuc.github.io/resume/” data-type=“link” data-id=“https://shihabiiuc.github.io/resume/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/coming-soon-template/” data-type=“link” data-id=“http://localhost/shihabiiuc/coming-soon-template/">Coming soon template</a></td><td><a href=“https://shihabiiuc.github.io/coming-soon/” data-type=“link” data-id=“https://shihabiiuc.github.io/coming-soon/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-landing-page-using-html-css-js/” data-type=“link” data-id=“http://localhost/shihabiiuc/create-landing-page-using-html-css-js/">Landing page template</a></td><td><a href=“https://shihabiiuc.github.io/landing-page/” data-type=“link” data-id=“https://shihabiiuc.github.io/landing-page/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/roofing-website-template-for-download-responsive/” data-type=“link” data-id=“http://localhost/shihabiiuc/roofing-website-template-for-download-responsive/">Roofing website template</a></td><td><a href=“https://shihabiiuc.github.io/roofing-website/” data-type=“link” data-id=“https://shihabiiuc.github.io/roofing-website/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr></tbody></table>
Conclusion
You saw a couple of examples to change <hr> color along with implementing gradient and changing the thickness. Let me know if you found the solution. Also, let me know if you have any questions related to styling the hr tag.
