¿Cómo crear bordes dobles con diferentes grosores?

Lo que busco, es poder añadir bordes "dobles" a cualquier elemento (textos, cuadros de contenido, etc.) pero, no consigo dar con el código que me permita poner 2 bordes de diferentes grosores, uno sobre el otro, tal y como se ve aquí:



¿Alguien podría echarme una manita?🙄


Gracias

Se me ocurre que podrías encapsularlo en dos divs y cada uno con un borde de abajo diferente. Algo del tipo:

Posiblemente hay varios métodos, te muestro 2 de ellos que se me ocurren
Uno con box-shadow y otro con border-image

VER DEMO

Saludos 🙂

OLMID dijo:

Posiblemente hay varios métodos, te muestro 2 de ellos que se me ocurren
Uno con box-shadow y otro con border-image

VER DEMO

Saludos 🙂

Hacer clic para expandir...

¡¡Gracias!! Ambas funcionan perfectamente:encouragement:. Por preferencia, me quedaría con la primera, para no sobrecargar la página usando imágenes de fondo pero, no sé si es cosa de mi monitor o qué, en esa, se aprecian ligeramente unos bordes grises a la derecha e izquierda (al hacer zoom, incluso se aprecian más). Si hubiera alguna forma de que no se vieran, sería ideal:welcoming:

La segunda opción, aunque sea con imágenes, va genial en cuanto a funcionamiento y aspecto.

- - - Actualizado - - -

alearis dijo:

Se me ocurre que podrías encapsularlo en dos divs y cada uno con un borde de abajo diferente. Algo del tipo:

HTML:

<div style="border-bottom:1px solid black;padding-bottom:2px;">
  <div style="border-bottom: 3px solid black;">
    <h1>Titulo</h1>
  </div>
</div>

Hacer clic para expandir...

¡Gracias! Probaré también esta opción:encouragement:.

Denarius dijo:

¡¡Gracias!! Ambas funcionan perfectamente:encouragement:. Por preferencia, me quedaría con la primera, para no sobrecargar la página usando imágenes de fondo pero, no sé si es cosa de mi monitor o qué, en esa, se aprecian ligeramente unos bordes grises a la derecha e izquierda (al hacer zoom, incluso se aprecian más). Si hubiera alguna forma de que no se vieran, sería ideal:welcoming:

La segunda opción, aunque sea con imágenes, va genial en cuanto a funcionamiento y aspecto.

Hacer clic para expandir...

Lo de los "bordes grises a la derecha e izquierda" ya lo he solucionado con un pequeño retoque, también he añadido otras 2 formas de ponerlos, la última también anda muy bien 😉

VER DEMO

Saludos 🙂

OLMID dijo:

Lo de los "bordes grises a la derecha e izquierda" ya lo he solucionado con un pequeño retoque, también he añadido otras 2 formas de ponerlos, la última también anda muy bien 😉

VER DEMO

Saludos 🙂

Hacer clic para expandir...

¡¡Perfectísimo!! Muchas, muchas, muuuuuuchas gracias:encouragement: