Insertar líneas, marcos y cuadros de texto

Unos elementos que nos puede interesar colocar en cualquier momento pueden ser, también, la linea, el cuadro de texto o el marco. Pero, para mejor centrar las ideas, acuérdate de que...

En las propiedades de una linea (o borde) puedes indicar (en el código correspondiente), que sea solid (propiedad por omisión), o dotted, dashed y (a partir de un grosor de 3px), double, groove, ridge, inset y outset. 

Y que los colores puedes elegirlos de esta web o de esta otra (hay muchas) aunque, si sueles usar los básicos, te vale esta tabla de la derecha (estos colores básicos se pueden añadir a HTML o por código (#......) o por su propio nombre, que suele resultar más cómodo)

Y ahora, vamos allá:
Insertar una línea de separación
El código de una línea es muy sencillo:
<hr />
(se puede escribir, simplemente, <hr>, y Blogger lo asimila) y ya sale una línea delgada que ocupa todo el ancho de la entrada .
Como ésta:

---

La línea sale, por defecto, centrada. También podemos limitar su tamaño, poniendo el % del ancho que queremos que ocupe (o los pixeles). Así:
<hr width="50%" />

---

Aunque aquí pudiera haber problemas con algún navegador, también podemos modificar el color, el grosor (size, o height), la alineación, etc. Por ejemplo, si escribimos (en HTML) esto...

<hr align="left" width="50%" color="#0000ff" size="3px" />
obtendríamos esto:

---

(de momento el problema que he visto es que el color (que es azul) de la línea solo se ve si paso a 'Vista previa' (o ya publicado). En cambio, los colores de los marcos, etc, que siguen, los veo perfectamente en el modo 'Publicar')

Enmarcar un texto
Te puede apetecer meter en un recuadro a determinado texto. Podríamos crear un marco fijo, que se haría así:
<div style="width:200px;height:100px;border:1px solid blue;"> INGRESA TU TEXTO AQUÍ. </div>
y tendría (en el ejemplo) esta pinta: 

En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. 

Como ves, el problema es que, evidentemente, tenemos que ajustar el marco al tamaño del texto.

Es más práctico hacerlo a partir de los atributos border y padding, de los que hablaba aquí
Así que basta escribir algo como esto...
<div style="border: 2px solid blue; padding: 10px; width: 200px;">Texto a insertar</div>
para que el marco se ajuste al texto, y deje, además, el marco interno (padding) que deseemos. Por seguir con el ejemplo...

En un lugar de la Mancha de cuyo tiempo no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

(Por supuesto, si quieres que el cuadro esté en el centro de la página, antes del código del marco insertas un
<div align="center">
y debes insertar, también, al final del todo, su etiqueta de cierre (y, porque te va a ser cómodo, un salto de línea. O sea, esto:
</div><br />
Así que está claro ¿no?

Insertar un cuadro de texto
El cuadro de texto en un marco con barra de desplazamiento (scroll) que tiene la ventaja de que el tamaño que ocupa siempre es el mismo (el que definamos).
Para eso hay que añadirle la propiedad overflow: scroll o, como muchos recomiendan, overflow: auto que tiene la ventaja de que crea la barra de desplazamiento (vertical) solo cuando el texto sobrepasa el tamaño del cuadro. Caso contrario, se presenta como un marco normal que engloba el texto (sin barra).
Así que añadir overflow: auto es una solución muy interesante.
El código de un cuadro de texto (que normalmente va centrado en la página) puede ser este:
<div align="center"><div style="border: 4px groove green; overflow: auto; height: 80px; width: 200px; color: black; background-color: #99cc32;"> Texto a insertar </div></div>

En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. 

Hago notar que no aparecerá la barra deslizante horizontal a menos que incluyas el texto (dentro del cuadro) en un marco (con border: 0) que tenga su width (anchura) mayor que el del marco externo.
Y además, de esta forma se puede alinear el texto (dentro de su marco) como quieras, porque si no <div align="center"> 'manda' en todo el contexto, como se ve en el cuadro anterior.
Mira, en cambio, esto:

En un lugar de la Mancha de cuyo tiempo no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

¿qué he hecho? pues lo dicho, aplicarle un marco interior. Aquí puedes ver el código empleado:

<div align="center"><div style="background-color: #99cc32; border: 4px groove green; color: black; height: 80px; overflow: auto; width: 180px;"><div style="border: 0; height: 100px; text-align: left; width: 300px;">Texto a insertar</div></div></div><br />

(si quieres ampliar este tema, puedes mirar aquí, y también aquí)