CSS 2: 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:

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 Edge y 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 y Edge no lo hace.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
hr {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Incorrecto en Firefox Correcto en Edge
hr {
  height: 1px;
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Incorrecto en Firefox Correcto en Edge
hr {
  height: 10px;
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Edge no interpreta correctamente las propiedades margin-left y margin-right cuando se utilizan junto con width. En Edge, la línea se dibuja en el centro del espacio definido por los márgenes.

En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox y Chrome, pero en el centro en Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
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 en Firefox y Chrome, pero en el centro en Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
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 en Firefox y Chrome, pero en el centro de la mitad derecha en Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo