Utilizando CSS3 hoy (4): border-image

Vamos a ver hoy otra posibilidad que nos ofrece CSS3 y que soportan ya Safari 3.1+, FireFox 3.5+ y Chrome 1.0+: La de utilizar imágenes en los bordes de elementos de nuestra web en lugar del borde normal, utilizando la porción de la imagen que indiquemos y estirándola también lo que indiquemos en la instrucción de CSS3.

La sintaxis a utilizar es un poco compleja, pero con los ejemplos creo que se entenderá mucho mejor (eso espero…).

La propiedad es border-image, aunque para utilizarla hoy hay que anteponer los prefijos que hemos visto para otras instrucciones de CSS3: -webkit para Safari y Chrome y -moz para Firefox:

1 2	-webkit-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch; -moz-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch;

En donde pone imagen habrá que poner la ruta hasta la imagen que vayamos a utilizar en el borde. Luego hay que indicar el tamaño que se va a utilizar de cada esquina de la imagen para cada esquina del nuevo borde de nuestro elemento (en el orden de las agujas del reloj, es decir arriba, derecha, abajo e izquierda. Se pueden expresar en porcentajes o sin ninguna unidad de medida para expresar píxeles exactos, es decir por ejemplo 10 10 10 10). La última parte, donde poner stretch, determina cómo se van a escalar y cortar los bordes de los lados y superior e inferior de nuestro elemento. Hay tres posibles valores:
- stretch (estirar)
- repeat (repetir)
- round (redondear)
Si especificamos sólo un valor es como poner dos veces el mismo (por ejemplo sólo una vez stretch. Entonces será stretch tanto para los lados superior e inferior como para los lados izquierda y derecha). El valor por defecto es “stretch”.

Vamos a ver algunos ejemplos para ver cómo funciona:

Supongamos que vamos a utilizar esta imagen para crear los bordes. Es un gif de 50px por 50px que lo he llamado borde1.gif:
borde1

Ahora supongamos que tenemos un elemento DIV de 300px de ancho y 100px de alto para el que queremos poner de borde la imagen anterior. Si hacemos:

<html>
<head>
  <title>border-image</title>
  <style type="text/css">
   div {
     width: 300px;
     height: 200px;
     padding: 10px; /* pongo un padding para despegar el texto de los bordes*/
     border-width: 10px;
     -webkit-border-image: url(borde1.gif) 25% stretch stretch;
     -moz-border-image: url(borde1.gif) 25% stretch stretch;
    }
</style>
</head>
<body>
    <div>
     <p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
    </div>
</body>
</html>

El resultado es este:
borde1r

¿Qué ha sucedido? Si vemos el código, en primer lugar hemos dicho que el grosor del borde debe ser de 10px (con border-width). Esos 10 píxels de borde se van a rellenar con nuestra imagen borde1.gif. Para ello hemos aplicado border-image para los navegadores que usan webkit (Safari y Chrome) y a los de Mozilla (Firefox) con sus respectivos prefijos. Vamos a ver los parámetros que hemos elegido para border-image uno a uno:
- url(borde1.gif) : indicamos el camino y nombre de la imagen que vamos a usar para crear el borde.
- 25% : Hemos elegido el mismo valor para las cuatro esquinas (arriba, derecha, abajo e izquierda). Podríamos haber puesto cuatro valores diferentes o dos valores (arriba-abajo e izquierda-derecha). ¿Qué nos indica este 25%? Que se va a tomar para rellenar los 10 píxels de borde de la esquina superior izquierda del DIV el 25% de la imagen que usamos como borde cortando desde la esquina superior izquierda. Y lo mismo para el resto de esquinas:

borde1e

- stretch stretch: indica que tanto para los lados superior-inferior como para los lados izquierda-derecha lo que se hace es alargar la imagen del borde hasta que se llegue a la siguiente esquina.

Vamos a ver otro ejemplo. Supongamos que la imagen que vamos a usar como borde es esta:
borde2

Con este código:

<html>
<head>
  <title>border-image</title>
  <style type="text/css">
   div {
     width: 300px;
     height: 200px;
     padding: 10px;
     border-width: 10px;
     -webkit-border-image: url(borde2.gif) 28% stretch;
     -moz-border-image: url(borde2.gif) 28% stretch;
    }
</style>
</head>
<body>
    <div>
     <p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
    </div>
</body>
</html>

Se obtiene esto (ahora se ve mejor el efecto de stretch alargando la imagen del borde hasta encontrar la otra esquina):
borde2r

Si hubiéramos puesto round en vez de stretch:

1 2	-webkit-border-image: url(borde2.gif) 28% round; -moz-border-image: url(borde2.gif) 28% round;

tendríamos:
border2r2

Es un poco difícil cogerle el truco, pero haciendo pruebas con los porcentajes y los efectos se pueden lograr cosas interesantes, por ejemplo para crear botones. Os recomiendo los artículos recomendados que siguen a continuación que, aunque estén en inglés, se ven algunos ejemplos prácticos. Además, en el de irbabe.com se nos enseña cómo conseguir aplicar imágenes a bordes con jQuery para que así funcione también con Internet Explorer.