Bordes con imágenes en CSS 3

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.

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.

Ejemplo de 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:

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.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros