¡Hola!. Hace tiempo tenía esa duda pero jugando un poco con CSS (Estoy aprendiendo) he conseguido hacer una barra exactamente o muy parecida a lo que es un <hr> en horizontal pero en vertical.

No existe ningún método de hacer un <hr> en vertical de forma directa como lo hacemos en horizontal (Esto es lo que he leido, no se será correcto o no) y una manera de hacerlo sería con un div y aplicarle unos atributos que serían estos:

#barra_vertical{
float:left;
border-left: 2px solid #999999;
width:1px;
height:200px;
}

No es que esto sea una maravilla de aporte pero seguro que a alguno le servirá y en vez de tener que estar haciendo imagenes, y se ahorrá tiempo de carga de su página con esa imagen molesta ;].

Lo sé, pero a lo mejor no le interesa poner el borde a ese div... No se, lo dejo ahí para el que le guste

No se si estoy mal, pero creo que el code tiene un pequeño error

Por que tiene width:1px;, si el borde tiene 2px "border-left: 2px  solid #999999;" para ello deberiamos poner  border-left: 1px solid #999999; y todo estara listo..

Es verdad, es como yo llamo, code al dope

Yo soy más de poner el border en los divs que quiero separar.

Pues, yo pienso que mejor pudiste modificar el hr y cambiar los width y height...

Creo que con
hr {
border-left: 1px solid #999999;
height:200px;
}

bastaria. Creo

vr {
    border-left: 1px solid #999999;
    height: 100%;
}

una nueva etiqueta <vh> jajaja

Saludos

Bueno, era un mero aporte. Cada uno tiene su forma de realizar su código y eso es indiscutible.

Quizás sea buena idea considerar los aportes de otros y mejorar el tuyo. Esa es la magia de compartir.

vr {
    border-left: 1px solid #999999;
    height: 100%;
}

una nueva etiqueta <vh> jajaja

Saludos

HTML 5, no? Sabes que exploradores lo aceptan? Estoy fuera de juego ya :/

Saludos!