Mediante CSS podemos llegar a parametrizar los bordes de múltiples maneras. Una de ellas es hacer que los bordes tengan un efecto 3D.

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;
}

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ía 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 el elemento img:

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

Publicaciones relacionadas:

Borde con líneas discontinuas Borde con doble linea mediante CSS Bordes con puntos Redondear bordes con CSS Espaciar bordes de una tabla con CSS