Como posso alterar a espessura da minha tag <hr>

Quero alterar a espessura da minha regra horizontal ( <hr>) em CSS. Eu sei que isso pode ser feito em HTML assim -

<hr size="10">

Mas ouvi dizer que isso foi preterido, conforme mencionado no MDN aqui . No CSS, tentei usar, height:1pxmas isso não altera a espessura. Eu quero que a <hr>linha seja 0.5pxgrossa.

Estou usando o Firefox 3.6.11 no Ubuntu

Para obter consistência, remova todas as bordas e use a altura para a <hr>espessura. A adição de uma cor de plano de fundo dará estilo à sua <hr>altura e cor especificadas.

Na sua folha de estilo:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Ou inline como você tem:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Explicação mais longa aqui

Renderização de sub-pixel em navegadores

A renderização de sub-pixel é complicada. Você não pode esperar que um monitor processe uma linha fina menor que um pixel. Mas é possível fornecer dimensões sub-pixel. Dependendo do navegador, eles são processados ​​de maneira diferente. Confira a postagem do blog de John Resig sobre isso.

Basicamente, se o seu monitor for um LCD e você estiver desenhando linhas verticais, poderá desenhar facilmente uma linha de 1/3 pixel. Se o fundo for branco, dê a cor da linha de #f0f. Para os olhos, essa linha terá 1/3 de pixel de largura. Embora seja de alguma cor, se você ampliar o monitor, verá que apenas um segmento de todo o pixel (que consiste em RGB) ficará escuro. Essa é uma técnica bastante usada para sugestões de tipos finos, como o ClearType .

Mas as linhas horizontais podem ter apenas um pixel cheio de altura. Essa é a limitação da tecnologia dos monitores LCD. Os CRTs eram ainda mais complicados com seus fósforos triangulares (a menos que fossem do tipo grade de abertura, como Sony Trinitron), mas essa é uma história diferente.

Basicamente, fornecer uma dimensão de sub-pixel e esperar que ela seja renderizada dessa maneira é o mesmo que esperar que uma variável inteira armazene um número de 1.2034759349. Se você entende que isso é impossível, você deve entender que os monitores não podem render dimensões sub-pixel.

Estilo seguro para vários navegadores

Mas a maneira como as regras horizontais se misturam geralmente são feitas usando cores. Portanto, se o seu plano de fundo for, por exemplo, branco ( #fff), você sempre poderá iluminar HR muito . Like #eee.

O estilo seguro entre navegadores para uma regra horizontal muito leve seria:

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

E use um arquivo CSS em vez de estilos em linha. Eles fornecem uma definição central para todo o site e não apenas um elemento específico. Torna a manutenção muito melhor.

Eu estava procurando a maneira mais curta de desenhar uma linha de 1px, pois toda a carga de CSS separado não é a solução mais rápida ou mais curta.

Até HTML5, o WAS era uma maneira mais curta para 1px hr: <hr noshade> mas .. O atributo noshade de <hr> não é suportado no HTML5. Use CSS em seu lugar. (nem outros atributos usados ​​antes, como tamanho, largura, alinhamento ) ...

Agora, este é bastante complicado, mas funciona bem se for necessário 1px hr mais simples:

Variação 1, PRETO h: (melhor solução para preto)

<hr style="border-bottom: 0px">

Saída: FF, Opera - preto / Safari - cinza escuro

Variação 2, CINZENTO h (mais curto!):

<hr style="border-top: 0px">

Saída: Opera - cinza escuro / FF - cinza / Safari - cinza claro

<hr style="border: none; border-bottom: 1px solid red;">

Saída: Opera / FF / Safari: 1px vermelho.

Eu recomendaria definir o HRpróprio como 0pxalto e usar sua borda para ficar visível. Percebi que quando você aumenta ou diminui o zoom (ctrl + roda do mouse) a espessura HRmuda, enquanto que quando você define a borda, ela permanece sempre a mesma:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

O atributo height foi descontinuado no html 5. O que eu faria é criar uma borda ao redor da hora e aumentar a espessura da borda da seguinte forma: hr style = "border: solid 2px black;"

Eu adicionei opacidade à linha, então parece mais fina:

<hr style="opacity: 0.25">

Acredito que a melhor conquista para a <hr>etiqueta de estilo é a seguinte:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

E para o código HTML apenas acrescentar: <hr>.

Aqui está uma solução para uma linha preta de 1 pixel sem borda ou margem

hr {background-color:black; border:none; height:1px; margin:0px;}

• Testado no Google Chrome

Eu pensei que eu gostaria de acrescentar isso porque as outras respostas não incluem: margin:0px;.

• Demo

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Sugiro usar construção como

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>