En el diseño de un sitio Web podemos encontrar diversos desafíos. Entre ellos podríamos requerir asignar bordes a las imágenes. Para esto CSS3 nos ofrece una propiedad específica que nos permitirá resolver el tema de manera simple.

En este artículo explico como usar border-imagen y que ventajas nos presenta.

La propiedad border-image

Dentro de las características que se agregan en CSS3 para bordes, encontramos una interesante opción con border-image.

Mediante esta propiedad, podremos establecer imágenes para los bordes de nuestras cajas, como por ejemplo para un div.

Podremos trabajar sobre cada uno de los lados (border-top-image, border-right-image, border-bottom-image, border-left-image, border-top-left-image, border-top-right-image, border-bottom-left-image y border-bottom-right-image.) y también sobre las esquinas (border-corner-image).

Además de asignar la URL de la imagen (JPEG, PNG o GIF), también podremos indicar valores numéricos de como se posicionará la imagen y otros parámetros adicionales.

Imágenes en los bordes: conclusión

Asignar bordes a las imágenes es hoy en día una tarea simple para todos los que nos dedicamos al desarrollo y maquetado de sitios Web. La evolución de CSS ha traído características muy útiles para muchas situaciones que años atrás eran más complejas de resolver.

Para encontrar más información y ver ejemplos de esta característica, podremos ingresar en el documento del W3C en la sección Border Image.

Si te interesa aprender más sobre diseño y desarrollo Web dejame un comentario o escribeme un mensaje.