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
stylede 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.
