¿Cómo puedo cambiar el grosor de mi etiqueta <hr>?

Quiero cambiar el grosor de mi regla horizontal ( <hr>) en CSS. Sé que se puede hacer en HTML así:

<hr size="10">

Pero escuché que esto está en desuso como se menciona en MDN aquí . En CSS intenté usar height:1pxpero no cambia el grosor. Quiero que la <hr>línea sea 0.5pxgruesa.

Estoy usando Firefox 3.6.11 en Ubuntu

Por consistencia, elimine cualquier borde y use la altura para el <hr>grosor. Agregar un color de fondo le dará un estilo <hr>con la altura y el color especificados.

En tu hoja de estilo:

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

O en línea como lo tienes:

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

Explicación más larga aquí

Representación de subpíxeles en navegadores

La representación de subpíxeles es complicada. En realidad, no puede esperar que un monitor represente una línea delgada de menos de un píxel. Pero es posible proporcionar dimensiones de subpíxeles. Dependiendo del navegador, los representan de manera diferente. Mira esta publicación de blog de John Resig al respecto.

Básicamente, si su monitor es un LCD y está dibujando líneas verticales, puede dibujar fácilmente una línea de 1/3 píxeles. Si tu fondo es blanco, dale color a tu línea #f0f. A simple vista, esta línea tendrá 1/3 de píxel de ancho. Aunque será de algún color, si amplía el monitor, verá que solo un segmento del píxel completo (que consiste en RGB) estará oscuro. Esta es prácticamente una técnica que se utiliza para sugerencias de tipo fino, es decir, ClearType .

Pero las líneas horizontales solo pueden tener una altura de píxel completo. Esa es la limitación tecnológica de los monitores LCD. Los CRT eran aún más complicados con sus fósforos triangulares (a menos que fueran del tipo de rejilla de apertura, es decir, Sony Trinitron), pero esa es una historia diferente.

Básicamente, proporcionar una dimensión de subpíxeles y esperar que se procese de esa manera es lo mismo que esperar que una variable entera almacene un número de 1.2034759349. Si comprende que esto es imposible, debe comprender que los monitores no pueden representar dimensiones de subpíxeles.

Estilo seguro de navegador cruzado

Pero la forma en que las reglas horizontales que se mezclan generalmente se hacen usando colores. Entonces, si su fondo es, por ejemplo, blanco ( #fff), siempre puede hacer que sea HR muy claro. Al igual #eee.

El estilo seguro del navegador cruzado para una regla horizontal muy ligera sería:

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

Y use un archivo CSS en lugar de estilos en línea. Proporcionan una definición central para todo el sitio, no solo un elemento en particular. Hace que la mantenibilidad sea mucho mejor.

Estaba buscando la forma más corta de dibujar una línea de 1px, ya que la carga completa de CSS separado no es la solución más rápida o más corta.

Hasta HTML5, WAS era una forma más corta para 1px hr: <hr noshade> pero .. El atributo noshade de <hr> no es compatible con HTML5. Use CSS en su lugar. (ni otros atributos utilizados anteriormente, como tamaño, ancho, alinear ) ...

Ahora, este es bastante complicado, pero funciona bien si se necesita la mayoría de 1px hr:

Variación 1, BLACK hr: (la mejor solución para negro)

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

Salida: FF, Opera - negro / Safari - gris oscuro

Variación 2, GRIS h (¡la más corta!):

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

Salida: Opera - gris oscuro / FF - gris / Safari - gris claro

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

Salida: Opera / FF / Safari: 1px rojo.

Recomendaría configurar el HRpropio en 0pxalto y utilizar su borde para que sea visible en su lugar. Me di cuenta de que cuando acercas y alejas (ctrl + rueda del mouse) el grosor de HRsí mismo cambia, mientras que cuando configuras el borde siempre permanece igual:

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

el atributo de altura ha quedado en desuso en html 5. Lo que haría es crear un borde alrededor de hr y aumentar el grosor del borde como tal: hr style = "border: solid 2px black;"

Agregué opacidad a la línea, por lo que parece más delgada:

<hr style="opacity: 0.25">

Creo que el mejor logro para la <hr>etiqueta de estilo es el siguiente:

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

Y para el código HTML sólo tiene que añadir: <hr>.

Aquí hay una solución para una línea negra de 1 píxel sin borde ni margen

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

• Probado en Google Chrome

Pensé que iba a añadir esto porque las otras respuestas no incluyen: margin:0px;.

• Manifestación

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>

Sugiero usar construcción como

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

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