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;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 1px;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 2px;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 3px;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 10px;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores
Correcto en Chrome Incorrecto en Firefox
hr {
  height: 1px;
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores
Correcto en Chrome Incorrecto en Firefox
hr {
  height: 10px;
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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

hr {
  border-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 1px;
  border-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 10px;
  border-color: red;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 10px;
  margin-left: 50%;
  margin-right: 0%;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
hr {
  height: 10px;
  margin-left: 50%;
  margin-right: 25%;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
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%;
}
ERROR (no puede mostrarse el objeto)
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%;
}
ERROR (no puede mostrarse el objeto)
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%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo