15 ideas con CSS para las líneas de división hr

Es fácil hacer una línea de división entre dos elementos de una página. Para eso sólo hace falta teclear <hr/> y ya se genera una, pero quizás nunca habías pensado que como a cualquier otro elemento HTML, a las barras de división se les puede aplicar CSS para darles otro aspecto.

La forma más habitual consiste en quitarles el borde, darles algo de espacio (asignando un height) y añadiéndole una imagen de fondo con esa altura. Eso se hace mediante algo similar a este código que debería insertarse en nuestra hoja de estilo:

hr {
border: 0;
height: 20px;
background:url("URL_IMAGEN") no-repeat;
}

Para esto ya vimos en otro post cómo conseguir un buen puñado de imágenes bastante originales, pero ahora lo que haremos será prescindir de ellas sin renunciar a algo de estética gráfica.


Primero he puesto el resultado y después el código que habría que usar en cada caso. He intentado que cada una tuviera una pequeña característica distinta de las otras, pero por supuesto que se pueden combinar varias de ellas y complicarlo como se quiera.

Se agradecerían variantes adicionales a las propuestas porque muchas cabezas dan más de sí que una sola y el content da mucho juego.

Todas juntas las podéis ver también en este Dabblet y quede claro que los colores son sólo para distinguirlas un poco más...

---

hr {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}

---

hr {border: 1px dashed grey; height: 0; width: 60%;}

---

hr {border: 1px solid red; height: 2px; width: 70%;}

---

hr {border: 2px solid khaki; height: 2px; background-color: darkkhaki;}

---

hr {border: 0 ; border-top: 4px double blue; width: 90%;}

---

hr {border: 2px inset #eee; height: 1px; width: 80%;}

---

hr {border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px orange;}

---

hr {border: 0; height: 0; box-shadow: 0 1px 5px 1px purple;}

---

hr {border: 0; height: 2px; border-top: 1px dashed black; border-bottom: 1px dashed black;}

---

hr {border: 0; height: 2px; text-align: center; background-image: linear-gradient(left, #fff, #000, #fff);}

---

hr {border: 3px solid #666; border-radius: 300px/10px; height: 0px; text-align: center;}

---

hr {border: 0; height: 0; text-align: center;font-size: 24px; line-height: 24px; text-align: center;}
hr:after {content:"\25ca\00a0\25ca\00a0\25ca\00a0\25ca"; position: relative; top: -12px; color: darkblue;}

---

hr {border: 0; height: 24px; box-shadow: inset 0 22px 12px -12px green; color: green; text-align: center;}
hr:after {content:"\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605"; font-size: 14px;color: #eee;}

---

hr {border: 0; height: 0; border-top: 4px double black; text-align:center;}
hr:after {position: relative; top: -22px; content:"\25cf\25cf\25cf"; font-size: 34px;line-height: 34px; color: black;}

---

hr {border: 0; height: 4px; margin-top: 20px;background-image: linear-gradient(left, #fff, red, #fff); text-align: center;}
hr:after {content:"<hr/>"; position: relative; top: -12px; display: inline-block; width: 36px; height: 24px; padding: 0;border: 2px solid red; border-radius: 24px; background: red; color: white; font-size: 12px; line-height: 24px; }

Nota: Agregar prefijos a border-radius y a linear-gradient para una mayor compatibilidad con los distintos navegadores.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter