Si necesita añadir líneas horizontales de estilo separador a sus sitios web, sus opciones típicas incluyen añadir archivos de imagen de esas líneas a su página, pero eso requeriría que su navegador recupere y cargue esos archivos, lo que podría tener un impacto negativo en el rendimiento del sitio. También puede utilizar la propiedad CSS border para añadir bordes que actúen como líneas en la parte superior o inferior de un elemento, creando efectivamente su línea de separación.

O – mejor aún – usar el elemento HTML para la regla horizontal.

El elemento de regla horizontal

La apariencia predeterminada de las líneas de reglas horizontales no es la ideal. Para que se vean mejor, agregue CSS para ajustar la apariencia visual de estos elementos para que estén en línea con la apariencia que desea que tenga su sitio.

Se visualiza una etiqueta HR básica de la forma en que el browser desea visualizarla. Los navegadores modernos suelen mostrar etiquetas HR sin estilo con un ancho del 100 por ciento, una altura de 2 píxeles y un borde 3D en negro para crear la línea.

Anchura y altura son consistentes en todos los navegadores

Los únicos estilos que son consistentes en todos los navegadores web son el ancho y los estilos. Éstos definen el tamaño de la línea. Si no define la anchura y la altura, la anchura por defecto es del 100 por ciento y la altura por defecto es de 2 píxeles.

En este ejemplo, el ancho es el 50 por ciento del elemento padre (observe que estos ejemplos a continuación incluyen estilos en línea). En un entorno de producción, estos estilos se escribirían en una hoja de estilo externa para facilitar la gestión de todas las páginas):

>

Y en este ejemplo la altura es 2em:
>

  Cambiar los bordes puede ser difícil
En los navegadores modernos, el navegador construye la línea ajustando el borde. Por lo tanto, si elimina el borde con la propiedad style, la línea desaparecerá de la página. Como puedes ver (bueno, no verás nada, ya que las líneas serán invisibles) en este ejemplo:
>

Ajustar el tamaño del borde, el color y el estilo hará que la línea se vea diferente y tiene el mismo efecto en todos los navegadores modernos. Por ejemplo, en esta demostración el borde es rojo, punteado y de 1 píxel de ancho:
>

Pero si cambia el borde y la altura, los estilos se ven ligeramente diferentes en navegadores muy anticuados que en los navegadores modernos. Como puede ver en este ejemplo, si lo ve en IE7 y más abajo (un navegador que lamentablemente está desactualizado y que ya no es compatible con Microsoft) hay una línea interna biselada que no se muestra en los otros navegadores (incluyendo IE8 y más arriba):
>

Esos navegadores anticuados no son realmente una gran preocupación en el diseño web hoy en día, ya que han sido reemplazados en gran medida por opciones más modernas.
  Hacer una línea decorativa con una imagen de fondo
En lugar de un color, puede definir una imagen de fondo para su regla horizontal de modo que se vea exactamente como usted desea, pero que se muestre semánticamente en su marca de revisión. En este ejemplo usamos una imagen que es de tres líneas onduladas. Al configurarlo como la imagen de fondo sin repetición, crea una ruptura en el contenido que se parece casi a lo que se ve en los libros:
>

  Transformación de elementos HR
Con CSS3, también puede hacer que sus líneas sean más interesantes. El elemento HR es tradicionalmente una línea horizontal, pero con la propiedad Transformar CSS, puede cambiar su aspecto. Una de las transformaciones favoritas del elemento HR es la de modificar la rotación.
Puede girar el elemento HR para que quede ligeramente en diagonal:
hr {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
o-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transformar: rotar (10deg);
}

O puede rotarlo para que quede completamente vertical:
hr {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
o-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transformar: girar (90deg);
}

Recuerde que esta técnica rota el HR en función de su ubicación actual en el documento, por lo que es posible que tenga que ajustar la posición para que llegue a su destino. No es recomendable usar esto para añadir líneas verticales a un diseño, pero es una forma de obtener un efecto interesante.
  Otra forma de obtener líneas en sus páginas
Una cosa que algunas personas hacen en lugar de usar el elemento HR es confiar en las fronteras de otros elementos. Pero a veces un RRHH es mucho más cómodo y fácil de usar que intentar establecer fronteras. Los problemas con el modelo de caja de algunos navegadores pueden hacer que la configuración de un borde sea aún más complicada.