Bordes 3D con CSS

Mediante CSS podemos llegar a configurar los bordes de múltiples maneras. Una de ellas es hacer que los bordes tengan un efecto 3D. Así que hoy vamos a ver cómo podemos definir bordes 3D con CSS. Lo primero que hay que recordar que el borde es un atributo CSS que puede ser aplicado a varios elementos de una página HTML: tablas, imágenes, capas,… El atributo que nos permite modificar la apariencia del borde es border-style. Para poder utilizarlo simplemente tendremos que definir una clase CSS. El código para bordes 3D con CSS sería similar al siguiente:

.miborde {
  border-style: valor;
}

Recordar que los estilos se pueden definir dentro de un fichero asociado de CSS, en un elemento style dentro de la página o directamente sobre un elemento HTML con el atributo style.

Los valores para los efectos de borde 3D son los siguientes:

• groove, con forma de surco.
• ridge, con forma de canto.
• inset, con un efecto hacía dentro.
• outset, con un efecto hacía afuera.

Así, por ejemplo, bordes 3D con CSS y con forma de surco se definirían de la siguiente forma:

.groove {
  border-style: groove;
}

Solo quedará aplicarlo al elemento HTML mediante el atributo class. En el caso de hacerlo sobre una imagen tendríamos la siguiente línea de código:

<img src="imagen.jpg" class="groove" />

Para poder ver el efecto 3D es recomendable utilizar bordes anchos. Para ello tenemos el atributo CSS border-width. De igual manera, si utilizamos colores, con el atributo border-color, veremos los efectos 3D en su máximo esplendor. Podemos asociar estos atributos directamente sobre una imagen manipulando el elemento img:

img {
  border-color: #f00;
  border-width: 10px;
}

Espero que os haya quedado más claro cómo utilizar los bordes 3D. ¿Los has utilizado o piensas utilizar en alguno de tus diseños? Cuéntanoslo en los comentarios para conocer y compartir las experiencias.