Changing the color of an hr element

Question

I want to change the color of my hr tag using CSS  The code I ve tried below doesn t seem to work   hr       color   123455

User · Answer

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   hr     border-style  solid    border-color  cornflowerblue     or whatever        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

User · Answer

You can add bootstrap bg class like   lt hr class  bg-light    gt

User · Answer

Code Works For older IE Tried For Many Colors   lt hr color  black  gt   lt hr color  blue  gt

User · Answer

hr     height 0     border 0     border-top 1px solid  083972       This will keep the Horizontal Rule 1px thick while also changing the color of it

User · Answer

I believe this is the most effective approach     lt hr style  border-top  1px solid  ccc  background  transparent   gt    Or if you prefer doing it on all hr elements write this on you CSS   hr       background-color  transparent      border-top  1px solid  ccc

User · Answer

I think this can be useful  this was simple CSS selector   x000D   x000D  hr   background-color  red  height  1px  border  0    x000D   lt hr gt  x000D   x000D   x000D

User · Answer

border-color works in Chrome and Safari  background-color works in Firefox and Opera  color works in IE7

User · Answer

Only border-top with color is enough to make the line in different color   hr       border-top  1px solid  ccc

User · Answer

Tested in Firefox  Opera  Internet Explorer  Chrome and Safari   hr       border-top  1px solid red      See the Fiddle

User · Answer

I think you should use border-color instead of color  if your intention is to change the color of the line produced by  lt hr gt  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   hr   display  block  height  1px      border  0  border-top  1px solid  ccc      margin  1em 0  padding  0      An article titled    12 Little-Known CSS Facts     published recently by SitePoint  mentions that  lt hr gt  can set its border-color to its parent s color if you specify hr   border-color  inherit

User · Answer

hr     background-color   123455      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

User · Answer

hr       height  1px      color   123455      background-color   123455      border  none      Doing it this way allows you to change the height if needed  Good luck  Source  How To Style HR with CSS

User · Answer

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   lt hr style  color  99CC99    gt    if it s not working in chrome try below code    lt hr color  red    gt

User · Answer

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    hr   border  0  width  100   color   123455  background-color   123455  height  5px      Or you could just add the style to your HTML page directly when you insert a horizontal line  like this     lt hr style  background  123455    gt    Hope this helps

User · Answer

It s simple and my favorite    lt hr style  background-color   dd3333    gt

User · Answer

You should set border-width to 0  It works well in Firefox and Chrome    x000D   x000D  hr   x000D    clear  both  x000D    color  red  x000D    background-color  red  x000D    height  1px  x000D    border-width  0  x000D    x000D   lt hr   gt  x000D  This is a test x000D   lt hr   gt  x000D   x000D   x000D

User · Answer

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 id  myHR  to HR element and used it in Java Script   Here is the Code   x   document getElementById  myHR    y   x style width    600px   y   x style color    white   y   x style height    2px   y   x style border    none   y   x style backgroundColor    lightgrey

User · Answer

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       hr          height 2px          border 0px          background green          margin 0px   sometimes useful               Doesn t work in ie7 and below and in Quirks Mode     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       hr          height 0px          border 0px          border-top 2px solid blue          margin 0px   useful sometimes           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        hr          height 1px          border 0px          background blue          border-top 1px solid blue          margin 0px   useful sometimes           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  lt font color  blue  gt  lt  font gt  tag and put your precious  lt hr  gt  tag inside it  It will inherit the  lt font gt  lt  font gt  tag color   With this method  you WILL want to do like this   lt hr width  50  align  left   gt    Example        lt span gt          awhieugfrafgtgtfhjjygfjyjg          lt font color   42B3E5  gt  lt hr width  50  align  left   gt  lt  font gt       lt  span gt       lt  --Doesn t work in ie7 and below and in Quirks Mode-- gt    Here is a link for you to check  http   jsfiddle net sna2D

User · Answer

You can use CSS to make a line with a different color  example would be like that    border-left  1px solid rgb 216  216  216   border-right  medium none  border-width  medium medium medium 2px  border-style  none none none solid  border-color  -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb 216  216  216     that code will display vertical grey line

User · Answer

You can give the  lt hr noshade gt  tag and go to your css file and add     x000D   x000D  hr   x000D      border-top 0  x000D      color   123455  x000D    x000D   lt hr noshade   gt  x000D  This s a test x000D   lt hr noshade   gt  x000D   x000D   x000D

User · Answer

Some browsers use the color attribute and some use the background-color attribute  To be safe   hr      color   color      background-color   color

User · Answer

You could do this     x000D   x000D  hr   x000D    border  1px solid red  x000D    x000D   lt hr   gt  x000D  This s a test x000D   lt hr   gt  x000D   x000D   x000D

User · Answer

I like the answers setting border-top  but they are somehow still a little off in Chrome    BUT if I set border-top  1px solid black  and border-bottom  0px  I end up with a truly single line  that also works fine with higher thickness

User · Answer

hr   color   f00  background-color   f00  height  5px

User · Answer

I took a bet each way     hr       border-top  1px solid purple      border-color  purple      background-color  purple      color  purple

User · Answer

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    x000D   x000D  hr light    x000D      width 70    x000D      margin 0 auto   x000D      border 0px none white   x000D      border-top 1px solid lightgrey   x000D    x000D   lt hr class  light    gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D     allow hr to inherit color    x000D  hr   border  1px solid   x000D   x000D     reusable colour modifier    x000D   fc -alpha   color  crimson   x000D  normal hr  x000D   x000D   lt hr gt  x000D   x000D  hr with  lt span class  fc -alpha  gt colour modifier lt  span gt   x000D   x000D   lt hr class  fc -alpha  gt  x000D   x000D   x000D

[html] Changing the color of an hr element

Examples related to html

Examples related to css