How to Change the Color of an <hr> Element
The HTML <hr> element is a block-level element and represents a horizontal rule. It creates a horizontal line. We can style the horizontal line by adding color to it. This will make your user-interface more attractive. It is possible to do by adding the background-color property. Also, we can specify the color of the horizontal line through the border-top property.
In this snippet, you can find some examples of adding color to the <hr> tag.
Create HTML
- Use two <p> elements and add an <hr> element between them.
Add CSS
- Specify the height and background-color properties.
- Set the border to “none”.
Let’s see the final code.
Example of adding color to the <hr> tag with the background-color property:
Result
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
How TO — Style HR (Horizontal Ruler/Line)
You can use the border property to style a hr element:
Example
/* Red border */
hr.new1 <
border-top: 1px solid red;
>
/* Dashed red border */
hr.new2 <
border-top: 1px dashed red;
>
/* Dotted red border */
hr.new3 <
border-top: 1px dotted red;
>
/* Thick red border */
hr.new4 <
border: 1px solid red;
>
/* Large rounded green border */
hr.new5 <
border: 10px solid green;
border-radius: 5px;
>
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Changing the color of an hr element
I want to change the color of my hr tag using CSS. The code I’ve tried below doesn’t seem to work:
27 Answers 27
I think you should use border-color instead of color , if your intention is to change the color of the line produced by <hr> tag.
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as suggested by @Ibu).
HTML 5 Boilerplate project in its default stylesheet specifies the following rule:
An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent’s color if you specify hr < border-color: inherit >.
- border-color works in Chrome and Safari.
- background-color works in Firefox and Opera.
- color works in IE7+.
I think this can be useful. this was simple CSS selector.
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
This will keep the Horizontal Rule 1px thick while also changing the color of it:
Only border-top with color is enough to make the line in different color.
After reading all the answers here, and seeing the complexity described, I set upon a small diversion for experimenting with HR. And, the conclusion is that you can throw out most of the monkeypatched CSS you wrote, read this small primer and just use these two lines of pure CSS:
That is ALL you need to style your HRs.
- Works cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
- No "I think this will work. ", "you need to keep Safari/IE in mind. ", etc.
- no extra css — no height , width , background-color , color , etc. involved.
Just bulletproof colourful HRs. It’s that simple TM .
Bonus: To give the HR some height H , just set the border-width as H/2 .
I believe this is the most effective approach:
Or if you prefer doing it on all hr elements write this on you CSS:
The background is the one you should try to change.
You can also work with the borders color. I am not sure; I think there are cross-browser issues with this. You should test it in different browsers.
You can add bootstrap bg class like
if u use css class then it will be taken by all ‘hr’ tags , but if u want for a particular ‘hr’ use the below code i.e, inline css
if it’s not working in chrome try below code:
Some browsers use the color attribute and some use the background-color attribute. To be safe:
It’s simple and my favorite.
I’m testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:
You should set border-width to 0; It works well in Firefox and Chrome.
Since i don’t have reputation to comment, i will give here a few ideas.
if you want a css variable height, take off all borders and give a background color.
if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or
In both ways, if you set a width, it will always have it’s size.
No need to set display:block; for this.
To be totally safe, you can mix both, ’cause some browsers can get confused with height:0px; :
With this method you can be sure that it will have at least 2px in height.
It’s a line more, but safety is safety.
This is the method you should use to be compatible with almost everything.
Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.
In the worst cases, you can try to add color:blue; .
In the worst of the worst cases, you can try to use a <font color=»blue»></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.
With this method, you WILL want to do like this: <hr width=»50″ align=»left»/> .
Тег hr
Тег hr задает разделительную горизонтальную линию. Преимущество тега в том, что для того, чтобы провести одиночную линию, не требуется создавать лишних блоков. Не требует закрывающего тега.
Пример
Давайте посмотрим, как работает тег hr :
Пример
Давайте попробуем поменять цвет линии с помощью CSS свойства border-color :
Пример
Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):
Пример
Давайте теперь поменяем цвет линии с помощью CSS свойства border . Обратите внимание на то, что при этом линия станет двойной толщины (так как мы задали границу и сверху, и снизу):
Пример
Попробуем поменять цвет линии с помощью CSS свойства border-top , и зададим только верхнюю границу. Теперь двойной линии не будет:
Пример
Давайте сделаем линию в виде точек с помощью CSS свойства border-top , зададим значение dotted вместо solid :
Пример
Давайте увеличим толщину линии с помощью CSS свойства border-width :
Пример
А теперь давайте линии добавим высоту height и границу через border . Граница при этом распадется на верхнюю и нижнюю: