Artículos
CSS

Borde con doble linea mediante CSS

12/Jul/2007

Vamos a seguir con los ejemplos CSS de tipos de bordes en los que ya hemos visto cómo insertar imágenes con borde en nuestras páginas web y cómo crear un borde con líneas discontinua para poder aplicarlo en cualquier elemento de tipo caja de nuestros diseños. En el caso de hoy, vamos a ver cómo podemos crear un borde con doble linea mediante CSS. Este tipo de borde lo podremos aplicar sobre cualquier elemento de tipo caja que hayamos incluido en el diseño de nuestras páginas web.

Lo primero que tenemos que saber es que para obtener un borde con doble linea mediante CSS utilizamos nuevamente el atributo border-style. En este caso, el valor que hay que darle, para que la línea sea doble es «double».

Las formas de definir un estilo son varias. Por ejemplo podemos hacerlo mediante el elemento style o directamente mediante el atributo style de los elementos HTML. Eso ya dependerá de las veces que quieras reutilizar el estilo, en el caso de lo vayas a reutilizar en muchos elementos es recomendable la primera opción, y en el caso de que sea algo puntual lo recomendable será optar por la segunda opción.

En este ejemplo, para poder obtener un borde con doble linea, vamos a utilizar la segunda forma. Vamos a definir una capa de contenido y ha aplicarle el estilo de borde con línea de doble. Así, sobre el elemento div, que representa una capa en HTML, añadimos nuestro código CSS:

<div style="border-style:double">
...
</div>

Aunque podemos definirlo en cualquier otro elemento. Por ejemplo, en una imagen, que es representada mediante un elemento img en HTML, el código que tendríamos sería el siguiente:

<img src="lineadecodigo.jpg" style="border-style:double"/>

Espero que os haya gustado y que os sea de utilizar el saber cómo podemos definir un borde con doble linea mediante CSS.

¿Cómo definirías un estilo para poder tener un borde de doble línea que podamos aplicar a muchos elementos de tu diseño? ¿Nos lo cuentas en los comentarios?

Código Fuente

Descárgate el código fuente de Borde con doble linea mediante CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
7 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios