CSS: Líneas horizontales

En esta página se comentan las propiedades que se pueden aplicar a una línea horizontal <hr> de una página web. Estas propiedades no son específicas de las líneas horizontales, pero en algunos casos sí que tienen efectos específicos.

Tamaño: width y height

La propiedad height establece la altura de la línea.

hr {
  height: 10px;
  background-color: black;
}
Enlace externo

La propiedad width establece la anchura de la línea. Se suele expresar como porcentaje.

hr {
  height: 10px;
  width: 50%;
  background-color: black;
}
Enlace externo

Color: color, background-color y border-color

La propiedad background-color establece el color de la línea, aunque en Firefox la línea debe tener más de 2px de altura para ser visible y en Chrome basta con tener establecida la propiedad height.

hr {
  background-color: red;
}
Enlace externo
hr {
  height: 1px;
  background-color: red;
}
Enlace externo
hr {
  height: 2px;
  background-color: red;
}
Enlace externo
hr {
  height: 3px;
  background-color: red;
}
Enlace externo
hr {
  height: 10px;
  background-color: red;
}
Enlace externo

En Firefox la propiedad color establece el color del borde de la línea, pero en Chrome no lo hace, como se comenta en la página de diferencias entre navegadores.

Correcto en Chrome Incorrecto en Firefox
hr {
  color: red;
}
Enlace externo Diferencias entre navegadores
Correcto en Chrome Incorrecto en Firefox
hr {
  height: 1px;
  color: red;
}
Enlace externo Diferencias entre navegadores
Correcto en Chrome Incorrecto en Firefox
hr {
  height: 10px;
  color: red;
}
Enlace externo Diferencias entre navegadores

La propiedad border-color establece el color del borde de la línea.

hr {
  border-color: red;
}
Enlace externo
hr {
  height: 1px;
  border-color: red;
}
Enlace externo
hr {
  height: 10px;
  border-color: red;
}
Enlace externo

Alineación: margin-left, margin-right y width

Si no se indican los márgenes, las líneas se alinean al centro.

hr {
  height: 10px;
  width: 50%;
  background-color: red;
}
Enlace externo

Para situar la línea en una posición determinada, se deben utilizar las propiedades margin-left y margin-right, sin utilizar la propiedad width. Los valores de estas propiedades se pueden expresar como distancias o como porcentajes.

hr {
  height: 10px;
  margin-left: 0%;
  margin-right: 50%;
  background-color: red;
}
Enlace externo
hr {
  height: 10px;
  margin-left: 50%;
  margin-right: 0%;
  background-color: red;
}
Enlace externo
hr {
  height: 10px;
  margin-left: 50%;
  margin-right: 25%;
  background-color: red;
}
Enlace externo

Cuando se aplican las propiedades margin-left, margin-right y width a una línea, la línea se dibuja a la izquierda del espacio definido por los márgenes si hay margin-left o a la derecha si sólo hay margin-right.

En el ejemplo siguiente, la línea se sitúa a la izquierda del todo:

hr {
  background-color: red;
  height: 10px;
  margin-left: 0%;
  width: 50%;
}
Enlace externo

En el ejemplo siguiente, la línea se sitúa a la derecha del todo:

hr {
  background-color: red;
  height: 10px;
  margin-right: 0%;
  width: 50%;
}
Enlace externo

En el ejemplo siguiente, la línea se sitúa a partir del centro:

hr {
  background-color: red;
  height: 10px;
  margin-left: 50%;
  width: 25%;
}
Enlace externo