Bordes con puntos

Mediante este sencillo ejemplo veremos cómo podemos crear bordes con puntos. Los cuales podremos aplicar a múltiples objetos de nuestra página HTML.

Configuración del borde con puntos

Los bordes se pueden configurar mediante el atributo border-style. Cuando queremos que el borde sea con puntos, deberemos utilizar el valor “dotted”.

border-style: dotted;

Este valor se lo podemos aplicar a varios elementos HTML directamente o bien crear un estilo adhoc donde definamos este tipo de borde. En nuestro ejemplo se lo vamos a aplicar a las tablas y vamos a crear el estilo “borde_con_puntos”, el cual, mediante estilos en linea, aplicaremos al elemento concreto que queramos.

table {border-style: dotted;}
.borde_con_puntos {border-style: dotted;}

Aplicación a tablas

Para ver el efecto en las tablas, bastará con añadir una tabla a nuestra página:

<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Aplicación mediante estilos en línea

Para aplicar el estilo en línea a un elemento en concreto, utilizamos el atributo class. Veamos cómo quedaría sobre una imagen:

<img src="imagen.jpg" class="borde_con_puntos" alt="Imagen con borde de puntos"/>