Cambiar el color de un elemento hr

border-color trabaja en Chrome y Safari
background-color funciona en Firefox y Opera
color trabaja en IE7+

Creo que esto puede ser útil. este fue un selector de CSS simple.

hr { background-color: red; height: 1px; border: 0; }

hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}

Hacerlo de esta manera le permite cambiar la altura si es necesario. Buena suerte. Fuente: Cómo Diseñar Recursos humanos con CSS

Probado en ff, opera, ie, chrome y safari

hr{
  border-top: 1px solid red;
}

Ver el violín http://jsfiddle.net/HPSjU/

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

Esto mantendrá la Regla Horizontal 1px gruesa mientras también cambia el color de la misma

hr
{
color: #f00;
background-color: #f00;
height: 5px;
}

Solo el borde superior con color es suficiente para hacer la línea en un color diferente.

hr{
  border-top: 1px solid #ccc;
}

Creo que este es el enfoque más efectivo:

<hr style="border-top: 1px solid #ccc; background: transparent;">

O si prefieres hacerlo en todos los elementos hr escribe esto en tu CSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

hr
{
  background-color: #123455;
}

El fondo es el que debes intentar cambiar

También puede trabajar con el color de bordes. no estoy seguro de que creo que hay problemas crossbrowser con esto. usted debe probarlo en diferentes navegadores

Si u usa la clase css, entonces será tomada por todas las etiquetas 'hr', pero si desea para un 'hr' particular, use el siguiente código, es decir, css en línea

<hr style="color:#99CC99" />

Si no funciona en chrome intente el siguiente código:

<hr color="red" />

Estoy probando en IE, Firefox y Chrome mayo 2015 y esto funciona mejor con las versiones actuales. Centra el HR y lo hace un 70% de ancho:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

Debe establecer border-width en 0; Funciona bien en Firefox y Chrome.

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

<hr />
This is a test
<hr />

Es simple y mi favorito.

<hr style="background-color: #dd3333" />

Algunos navegadores usan el atributo color y otros usan el atributo background-color. Para estar seguro:

hr{
    color: #color;
    background-color: #color;
}

Después de leer todas las respuestas aquí, y ver la complejidad descrita, me puse en una pequeña desviación para experimentar con recursos Humanos. Y, la conclusión es que se puede tirar la mayoría de los CSS monkeypatched que escribió, lea este pequeño primer y solo use estas dos líneas de CSS puro:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

Eso es TODO que necesita para el estilo de sus HRs.

• Funciona cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
• No " I creo que esto funcionará...", "es necesario tener Safari / IE en mente...", etc.
• no extra css-no height, width, background-color, color, etc. involucrados.

Solo a prueba de balas coloridas HRs. Es que simple^TM.

Bonus: Para dar a la HR una cierta altura H, simplemente establezca la border-width como H/2.

Dado que no tengo reputación para comentar, daré aquí algunas ideas.

Si desea una altura variable css, quite todos los bordes y dé un color de fondo.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

Si desea simplemente un estilo que sabe que funcionará (ejemplo: para reemplazar un borde en un elemento:: before para la mayoría de los clientes de correo electrónico o

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

En ambos sentidos, si establece un ancho, siempre tendrá su tamaño.

No es necesario establecer display:block; para esto.

Para estar totalmente seguro, puedes mezclar ambos, porque algunos navegadores pueden confundirse con height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

Con este método puede estar seguro de que tendrá al menos 2px de altura.

Es una línea más, pero la seguridad es la seguridad.

Este es el método que debe usar para ser compatible con casi todo.

Recuerde: Gmail solo detecta css en línea y algunos clientes de correo electrónico pueden no admitir fondos o bordes. Si uno falla, todavía tendrá una línea 1px. Mejor que Nada.

En el peor de los casos, puedes intentar añadir color:blue;.

En el peor de los peores casos, puedes intentar usar una etiqueta <font color="blue"></font> y poner tu preciosa etiqueta <hr/> dentro de ella. Heredará el color de la etiqueta <font></font>.

Con este método, querrá hacer lo siguiente: <hr width="50" align="left"/>.

Ejemplo:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

Aquí hay un enlace para que lo compruebes: http://jsfiddle.net/sna2D /

Puede usar CSS para hacer una línea con un color diferente, ejemplo sería así:

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);

Ese código mostrará una línea gris vertical.

Bueno, soy nuevo en HTML, CSS y Java, pero lo intenté a mi manera, lo que funcionó para mí en todos los navegadores. He usado JS en lugar de CSS que no funciona con algunos navegadores.

En primer lugar he dado id="myHR" al elemento HR y lo he usado en Java Script.
Aquí está el Código.

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";

1. El Código Funciona Para IE

2. Probado Para Muchos Colores

   <hr color="black">
   <hr color="blue">
   

El uso de colores de fuente para modificar las reglas horizontales las hace más flexibles y fáciles de usar.

La propiedad color no se hereda de forma predeterminada, por lo que se debe agregar lo siguiente a hr para permitir la herencia de color:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

Usted podría hacer esto:

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

Puedes dar la etiqueta <hr noshade> e ir a tu archivo css y añadir:

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

Como regla general, no puedes simplemente establecer el color de una línea horizontal con CSS como lo harías con cualquier otra cosa. En primer lugar, Internet Explorer necesita el color en su CSS para leer así:

"color: #123455"

Pero Opera y Mozilla necesitan el color en su CSS para leer así:

"color de fondo: #123455"

Por lo tanto, tendrá que agregar ambas opciones a su CSS.

A continuación, tendrá que dar a la línea horizontal algunas dimensiones o se predeterminará a la altura, anchura y color estándar establecidos por su navegador. Aquí hay un código de ejemplo de cómo debería verse tu CSS para obtener la línea horizontal azul.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

O simplemente puede agregar el estilo a su página HTML directamente cuando inserta una línea horizontal, como esta:

<hr style="background:#123455" />

Espero que esto ayude.

También puedes usar la etiqueta de fuente Por eg

<font color="red"><hr></font>