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

312

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

Srikar Appalaraju
fuente
Lo quiero realmente delgado, el usuario no debería notar que está allí a menos que lo busque específicamente. De todos modos probando ...
Srikar Appalaraju
77
También puede intentar que sea más del color del fondo para que se
mezcle
44
Como 1px es mínimo, debe hacer que la línea sea gris claro si desea que sea menos notable.
Gert Grenander
2
@MovieYoda: las dimensiones pueden ir subpíxeles, pero el renderizado se redondeará al píxel más cercano. Es como esperar que un valor entero sea 1.23784 ... Imposible. Puede establecerlo en este tipo de valor, pero se redondeará al número entero más cercano. Teóricamente, podría renderizar anchos redondeados a 1/3 de píxel en las pantallas LCD debido a los detalles de la tecnología, pero dudo que los navegadores realmente lo hagan. La dimensión restante del subpíxel no puede ser de ningún color porque está relacionada con solo uno de los fósforos RGB.
Robert Koritnik el
15
No medio pixel, medio px. La pregunta no es completamente tonta. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Respuestas:

524

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í

Gregg B
fuente
10
¿por qué estás haciendo border:none? ¿Cualquier razón? ¿El borde agrega grosor también?
Srikar Appalaraju
11
Sí, queremos usar el color de fondo para mostrar la línea por consistencia. FF usa el borde para crear el <hr> pero no lo hace. Esto hará que ambos sean lo mismo.
Gregg B
2
Sí, siempre he encontrado que las etiquetas <hr> entre navegadores son desagradables. Es bueno hacer que se comporten correctamente.
Gregg B
O bien, si sólo necesitas un hecho aislado, puede hacerlo en línea con<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm
1
¿Cuántos años tiene IE para la reserva color?
trysis
53

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.

Robert Koritnik
fuente
8

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


Variación 3, COLOR como se desee:

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

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

Muscaria
fuente
Me encantaría que, por favor, alguien lo pruebe para Chrome e IE. Las dos primeras variaciones son bastante complicadas, especialmente. 2da variación, que muestra primero visible NEGRO 1px.
Muscaria
Me gusta esta solución porque no codifica ninguna información de color, lo que puede ser útil para la compatibilidad con el modo oscuro. Funciona bien en Chrome.
tresf
6

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;
}
Yaerius
fuente
Puedo ver que en el último Chrome está cambiando de grosor en el resto de la página. Lo que es peor, puede desaparecer si se aleja :(
Pavel Alexeev
5

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

meddy
fuente
1

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

<hr style="opacity: 0.25">
Demacrado
fuente
0

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>.

Jodyshop
fuente
0

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>

theMaxx
fuente
-4

Sugiero usar construcción como

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

<div class="hr"><hr /></div>
Ankheg
fuente
Jejeje :) Nunca había visto esto antes :)
Prakash Raman