Bordes con imágenes en CSS 3

  • Por
El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.
Vamos a hablar rápidamente sobre uno de los nuevos atributos de las CSS 3, que sirve para personalizar los bordes de los elementos HTML con imágenes. Publicamos este artículo dentro del Manual de CSS 3, que es una especie de compendio de ejemplos y técnicas que nos permitirá aplicar esta nueva especificación de las Hojas de Estilo en Cascada.

De manera resumida, border-image es un atributo que nos ayudará a aplicar nuevos estilos a las cajas con CSS, a través de la utilización de imágenes en los bordes de los elementos, incluso pudiendo escoger varias imágenes para varias de las partes de los bordes.

Colocar imágenes en los bordes es una tarea que ya se suele realizar en el diseño web, y para ello se suelen utilizar complementariamente técnicas con los lenguajes HTML y CSS. Es decir, en el momento de escribir este artículo, para que un elemento de la página, como puede ser una división o una tabla, párrafo, etc., tenga un borde a partir de una imagen, se necesita colocar algún código HTML adicional, con algún contenedor que nos permita luego definir estilos CSS para "imitar" ese borde de imagen. En cualquier caso, estemos o no familiarizados con las técnicas de uso de imágenes en los bordes, lo importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos atributos a los elementos que deseemos.

Distintas especificaciones sobre border-image

Las especificaciones de CSS 3 están en etapa de desarrollo. El organismo W3C, que se encarga de definir los estándares de Hojas de Estilo en Cascada, ha alterado algunas veces las especificaciones del atributo border-image y relacionados. Es por ello que todavía hay algunas diferencias entre lo que los navegadores entienden con este atributo y lo que recomienda el W3C. Esto quiere decir que en el futuro todavía puede cambiar el funcionamiento de este atributo en los distintos navegadores, tal como anuncia Mozilla en su centro de desarrollo.

Para las personas que deseen encontrar de primera mano las especificaciones de los atributos para poner borde en las imágenes, recomendamos la lectura del sitio de la W3C.

Borrador de trabajo sobre las propiedades de borde de imagen. Noviembre de 2002
Borrador sobre borde de imagen. Diciembre 2009

Como se podrá ver, existen bastantes diferencias y es que también ha pasado bastante tiempo entre una y otra especificación. Además, la más actual de las dos tiene unas explicaciones basadas en esquemas mucho más entendibles.

Del mismo modo, tenemos acceso a las especificaciones que han puesto en marcha los más avanzados navegadores, que implementan ya de manera experimental algunos de los atributos para crear bordes en las imágenes.

Sitio para desarrolladores de Mozilla, sobre Border Image.
Sitio para desarrolladores de Mac y su navegador Safari.

Ejemplo de border-image

Así pues, para que sirva únicamente a modo de demostración que es todo lo que se puede hacer por el momento en este artículo de DesarrolloWeb.com, vamos a poner un simple ejemplo sobre lo que permiten a fecha de hoy los navegadores Safari y Firefox sobre border-image.

Por ejemplo, tendríamos este elemento HTML:

<div id="capaborde">
Esta capa le voy a poner un borde arriba
</div>

Y ahora podríamos aplicar estilos para crear un borde en la imagen:

#capaborde{
-moz-border-image: url(sello.png) 2 2 2 2 stretch stretch;
-webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch;
padding:20px;
width: 100px;
}

Como se puede ver, los atributos para bordes de imágenes no tienen el nombre definitivo, que será border-image, sino unos propios para cada uno de los dos navegadores que implementan esta nueva característica de CSS 3. El atributo -moz-border-image es para el navegador Firefox y otros productos de la compañía Mozilla y el atributo -webkit-border-image es para cualquier navegador basado en WebKit, como Safari o Chrome.

La imágen que estamos utilizando como borde es la siguiente:

Y el ejemplo se puede ver en marcha en una página aparte, pero recordar que depende de vuestro navegador podréis ver o no el borde de imagen.

Otros atributos para hacer borde con imágenes

A parte del atributo border-image, existen otros numerosos atributos para definir los bordes de manera independiente para cada uno de los lados o vértices de un elemento HTML. Quizás conviene esperar un poco antes de dar unas explicaciones concisas y ejemplos sobre este y otros atributos, puesto que han cambiado bastante últimamente.

Sin embargo, según la última especificación de CSS 3, tenemos los siguientes atributos:

border-image-source: Para indicar la URL de la imagen que vamos a utilizar como borde.

border-image-slice: Indica el espacio de la imagen que será visible como borde, en los cuatro lados del elemento, es decir, top, right, bottom y left.

border-image-width: Para indicar la anchura del borde.

border-image-outset: Nos sirve para indicar el área en la que la imagen de borde se extiende más allá del área del elemento, en los 4 lados del mismo.

border-image-repeat: Permite marcar si se desea o no que se repita la imágen del borde haciendo un mosaico o si se desea que se estire, etc.

border-image: Se utilizaría como una manera resumida de especificar varios atributos de borde con imágenes al mismo tiempo.

Explicar con ejemplos cada uno de estos atributos sería sin duda interesante, pero nos llevaría varios artículos y además, merece la pena hacerlo cuando ya estén disponibles como especificación definitiva de CSS 3 y no en un simple borrador, así como cuando estén implementados en los navegadores.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

daniel0708

15/3/2010
Gracias...
Muchisimas gracias por tus articulos. Son realmente de mucha ayuda, en especial para aquellos que aun no dominamos CSS. Un saludo desde Bolivia.

ron

16/10/2012
NO funciona en explorer ni mozilla
NO funciona en explorer ni mozilla no se si han suprimido la propiedad border image pero no anda sabes algo al respecto? nos vuelven locos esta gente

luiscr269

16/2/2013
No funciona
Ante todo gracias por estos artículos tan profesionales y a la vez fáciles de entender.
He intentado ver el ejemplo pero no funciona con Firefox 18 y sin embargo se ve algo con Chrome 24 aunque no la imagen entera.

Saludos.

Deivis

03/10/2013
css3
Lo que no me cuadra un poco es que algunas tag de CSS3 se ven en algunos navegdores en otros no, por ejemplo este -moz-border-top-colors
-moz-border-right-colors
-moz-border-bottom-colors
-moz-border-left-colors
en firefox se ve bien pero para otro navegadores como google chrome no se bien, y asi hay muchos. :(