I want to change the color of my
hr
tag using CSS. The code I've tried below doesn't seem to work:kooolkoool
But Opera and Mozilla needs the color in your CSS to read like this: “background-color: #123455” So, you will need to add both options to your CSS. Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser. Here is a sample code of what your CSS should look.
26 Answers
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 @Ibu suggested in his answer).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 }
.TonyTony
border-color
works in Chrome and Safari.background-color
works in Firefox and Opera.color
works in IE7+.
CameronCameron
I think this can be useful. this was simple CSS selector.
OmmOmm
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
Studio3Studio3
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
See the Fiddle.
Eric FortisEric Fortis
Only border-top with color is enough to make the line in different color.
KathirKathir
This will keep the Horizontal Rule 1px thick while also changing the color of it
Brian McCallBrian McCall
sushil bharwanisushil bharwani
I believe this is the most effective approach:
Or if you prefer doing it on all hr elements write this on you CSS:
Joao Alves MarruchoJoao Alves Marrucho
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 simpleTM.
Bonus: To give the HR some height
H
, just set the border-width
as H/2
.kumar_harshkumar_harsh
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 crossbrowser issues with this. you should test it in differrent browsers
IbuIbu
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:
deepideepi
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:
Elizabeth GeeElizabeth Gee
You should set border-width to 0; It works well in Firefox and Chrome.
zookszooks
MertMert
Some browsers use the
color
attribute and some use the background-color
attribute. To be safe:Kyle SlettenKyle Sletten
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'/>
.Example:
Here is a link for you to check: http://jsfiddle.net/sna2D/
You can use CSS to make a line with a different color, example would be like that:
that code will display vertical grey line.
user2689252user2689252
Well, I am new in HTML, CSS and in Java but I tried my way which worked for me in all browsers. I have used JS instead of CSS which doesn't work with some browsers.
First of all I have given
Here is the Code.
id='myHR'
to HR element and used it in Java Script. Here is the Code.
MurtazaMurtaza
Shivpe_RShivpe_R
Using font colours to modify horizontal rules makes them more flexible and easy to use.
The
color
property isn't inherited by default, so the following needs to be added to hr's to allow color inheritance:LarryLarry
You could do this :
AseelAseel
You can give the
<hr noshade>
tag and go to your css file and add :pacospacos
As a general rule, you can’t just set the color of a horizontal line with CSS like you would anything else. First of all, Internet Explorer needs the color in your CSS to read like this:
“color: #123455”
But Opera and Mozilla needs the color in your CSS to read like this:
“background-color: #123455”
So, you will need to add both options to your CSS.
Next, you will need to give the horizontal line some dimensions or it will default to the standard height, width and color set by your browser. Here is a sample code of what your CSS should look like to get the blue horizontal line.
Or you could just add the style to your HTML page directly when you insert a horizontal line, like this:
Hope this helps.
Aubrey LoveAubrey Love
David JonesDavid Jones
PratikPratik
protected by Community♦Mar 31 '16 at 2:04
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Would you like to answer one of these unanswered questions instead?