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?

Mediante CSS podemos manipular los bordes de los elementos HTML, que sean de formato caja, de una forma muy sencilla. La propiedad CSS que nos permite indicar qué tipo de borde queremos es border-style. En este caso vamos a ver cómo podemos crear un borde con líneas discontinuas en CSS. Y en concreto para nuestro objetivo y así poder tener un borde con líneas discontinuas, el valor a aplicar a la propiedad border-style es «dashed».

Pero vamos por partes, lo primero que tenemos que hacer es definir el estilo. Para ello, podemos crearnos un estilo propio, o bien aplicárselo directamente a uno de los elementos.

En el caso que queramos definir un estilo propio lo haremos de la siguiente forma:

.borde_discontinuo{
  border-style:dashed;
}

Y en el caso de querer aplicarlo sobre un elemento, en nuestro caso una tabla, que es representada mediante el elemento table, lo haremos de la siguiente forma:

table{
  border-style:dashed;
}

Hay que recordar que los estilos que definamos debemos de ponerlos dentro del elemento style de HTML. Ya sea en la propia página o asociando un fichero CSS. con dichos estilos.

Para aplicar estos estilos deberemos de utilizar el atributo class sobre el elemento que queramos aplicar el estilo. Por ejemplo, si queremos utilizar sobre una imagen, tendríamos la siguiente línea de código:

<img class="borde_discontinuo" src="lineadecodigo.miniatura.jpg" />

Hay que recordar que el elemento que en HTML nos permite insertar una imagen es el elemento img.

En el caso de que hayamos definido el estilo sobre un elemento, simplemente tendremos que utilizar el elemento HTML en nuestra página web.

Con estos pasos tan sencillos habremos conseguido crear un borde con líneas discontinuas. Y tú, ¿en qué elementos utilizas este tipo de bordes? Déjanos tus experiencias dentro de los comentarios.