Alterando a cor de um elemento hr

Quero mudar a cor da minha hrtag usando CSS. O código que tentei abaixo não parece funcionar:

hr {
    color: #123455;
}

Eu acho que você deve usar em border-colorvez de color, se sua intenção é mudar a cor da linha produzida por<hr> tag.

Embora tenha sido apontado nos comentários que, se você alterar o tamanho da sua linha, a borda ainda será tão larga quanto a especificada nos estilos, e a linha será preenchida com a cor padrão (que não é o efeito desejado na maioria das vezes). Tempo). Parece que, nesse caso, você também precisaria especificar background-color(como o @Ibu sugeriu em sua resposta).

O projeto HTML 5 Boilerplate em sua folha de estilo padrão especifica a seguinte regra:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Um artigo intitulado "12 fatos pouco conhecidos sobre CSS" , publicado recentemente pelo SitePoint, menciona que <hr>pode ser definido border-colorcomo pai, colorse você especificar hr { border-color: inherit }.

• border-colorfunciona no Chrome e Safari .
• background-color trabalha no Firefox e Opera.
• colorfunciona no IE7 + .

Eu acho que isso pode ser útil. esse foi um simples seletor de CSS.

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

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

Fazer dessa maneira permite alterar a altura, se necessário. Boa sorte. Fonte: Como estilizar RH com CSS

Testado no Firefox, Opera, Internet Explorer, Chrome e Safari.

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

Veja o violino .

Somente a borda superior com cor é suficiente para criar uma linha com cores diferentes.

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

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

Isso manterá a Regra Horizontal 1px de espessura, além de alterar a cor dela.

Eu acredito que esta é a abordagem mais eficaz:

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

Ou, se você preferir fazê-lo em todos os elementos hr, escreva isso em seu CSS:

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

hr
{
cor: # f00;
cor de fundo: # f00;
altura: 5px;
}

hr
{
  background-color: #123455;
}

o fundo é o que você deve tentar mudar

Você também pode trabalhar com a cor das bordas. Não tenho certeza se acho que há problemas de navegador cruzado com isso. você deve testá-lo em navegadores diferentes

se você usar a classe css, ela será usada por todas as tags 'hr', mas se você quiser uma determinada 'hr', use o código abaixo, por exemplo, css inline

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

se não estiver funcionando no chrome, tente o código abaixo:

<hr color="red" />

Depois de ler todas as respostas aqui e ver a complexidade descrita, comecei com uma pequena diversão para experimentar o RH. E, a conclusão é que você pode jogar fora a maior parte do CSS monkeypatched que você escreveu, ler esta pequena cartilha e usar essas duas linhas de CSS puro:

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

Isso é tudo que você precisa para criar seus RHs.

• Funciona em navegadores, dispositivos diferentes, sistemas operacionais, canais em inglês e idades cruzadas.
• Não "Acho que isso funcionará ..." , "você precisa manter o Safari / IE em mente ..." , etc.
• sem css extra - não height,width , background-color, color, etc. envolvidos.

Apenas HRs coloridos à prova de balas. É isso simples ^TM .

Bônus: para dar ao RH alguma altura H, basta definir o border-widthas H/2.

Alguns navegadores usam o coloratributo e outros o background-coloratributo. Estar seguro:

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

Estou testando no IE, Firefox e Chrome em maio de 2015 e isso funciona melhor com as versões atuais. Ele centraliza o RH e o torna 70% amplo:

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

<hr class="light" />

Você deve definir a largura da borda como 0; Funciona bem no Firefox e Chrome.

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

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

É simples e o meu favorito.

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

Você pode adicionar a classe bootstrap bg como

<hr class="bg-light" />

Como não tenho reputação de comentar, darei aqui algumas idéias.

se você quiser uma altura variável css, retire todas as bordas e dê uma cor de fundo.

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

se você quiser simplesmente um estilo que você saiba que funcionará (exemplo: substituir uma borda em um elemento :: before para a maioria dos clientes de email ou

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

Nos dois sentidos, se você definir uma largura, ela sempre terá seu tamanho.

Não há necessidade de definir display:block;para isso.

Para ser totalmente seguro, você pode misturar os dois, porque alguns navegadores podem se confundir com height:0px;:

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

Com esse método, você pode ter certeza de que terá pelo menos 2 px de altura.

É uma linha mais, mas segurança é segurança.

Este é o método que você deve usar para ser compatível com quase tudo.

Lembre-se: o Gmail detecta apenas o CSS embutido e alguns clientes de e-mail podem não suportar planos de fundo ou bordas. Se um falhar, você ainda terá uma linha de 1px. Melhor que nada.

Nos piores casos, você pode tentar adicionar color:blue;.

No pior dos piores casos, você pode tentar usar uma <font color="blue"></font>tag e colocar sua preciosa <hr/>tag dentro dela. Ele herdará a <font></font>cor da tag.

Com este método, você vai querer fazer assim: <hr width="50" align="left"/>.

Exemplo:

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

Aqui está um link para você verificar: http://jsfiddle.net/sna2D/

Você pode usar CSS para fazer uma linha com uma cor diferente; o exemplo seria assim:

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

esse código exibirá uma linha cinza vertical.

Bem, sou novo em HTML, CSS e em Java, mas tentei o que funcionava para mim em todos os navegadores. Eu usei JS em vez de CSS, que não funciona com alguns navegadores .

Primeiro de tudo, eu dei id="myHR"ao elemento HR e o usei em Java Script.
Aqui está o 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. Código funciona para IE mais antigo

2. Tentei por muitas cores

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

Usar cores de fonte para modificar regras horizontais as torna mais flexíveis e fáceis de usar.

A colorpropriedade não é herdada por padrão; portanto, é necessário adicionar o seguinte às hr's para permitir a herança de cores:

/* 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">

Você poderia fazer isso:

hr {
  border: 1px solid red;
}

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

Você pode dar a <hr noshade>tag e ir para o seu arquivo css e adicionar:

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

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

Como regra geral, você não pode simplesmente definir a cor de uma linha horizontal com CSS como faria com qualquer outra coisa. Primeiro de tudo, o Internet Explorer precisa da cor do seu CSS para ler da seguinte maneira:

"Cor: # 123455"

Mas o Opera e o Mozilla precisam da cor do seu CSS para ler da seguinte maneira:

“Cor de fundo: # 123455”

Portanto, você precisará adicionar as duas opções ao seu CSS.

Em seguida, será necessário fornecer algumas dimensões à linha horizontal ou ela será padronizada para a altura, largura e cor padrão definidas pelo seu navegador. Aqui está um código de exemplo da aparência do seu CSS para obter a linha horizontal azul.

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

Ou você pode simplesmente adicionar o estilo à sua página HTML diretamente ao inserir uma linha horizontal, assim:

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

Espero que isto ajude.

Fiz uma aposta em cada sentido:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }