Bordes con imágenes

Una de las limitaciones que tenía CSS, es que, si en lugar de utilizar los bordes de los que disponemos en CSS (sólidos, punteados, etc...) quisieramos hacer algo un poco más complejo con imágenes, podría volverse una tarea muy complicada. Por esa razón, CSS3 incorporó en su momento un sistema para crear bordes extensibles basados en una imagen de molde.

La técnica 9-slice

Dicho sistema se denomina 9-slice (muy utilizado en videojuegos) y se basa en delimitar una imagen trazando cuatro líneas (en rojo). Esto hará que la imagen quede dividida en 9 fragmentos, donde el fragmento central es descartado y el resto es utilizado de molde para los bordes de un elemento:

De esta forma, los fragmentos 1, 3, 7 y 9 se utilizarán para las esquinas y los fragmentos 2, 4, 6 y 8 se utilizarán para los bordes laterales, pudiendo expandirlos si se requiere y considera necesario con alguna de las propiedades que veremos a continuación.

Propiedades para crear bordes

Las propiedades que podemos utilizar para crear bordes con imágenes son las siguientes:

Propiedad	Descripción
border-image-width	Especifica el grosor de la imagen utilizada para el borde.
border-image-source	Imagen a utilizar para los bordes con imágenes mediante la técnica 9-slice.
border-image-slice	Distancia donde se hace el punto de corte en la imagen.
border-image-outset	Tamaño en el que el borde crece hacia fuera. Una especie de padding del borde.

Estas propiedades pueden ser algo complicadas, por lo que vamos a utilizar la siguiente imagen expandible (imagen de la izquierda), que simula ser un antiguo carrete fotográfico, como borde con imagen. Las líneas rojas no forman parte de la imagen original, sino que se utilizan en este ejemplo para dejar claro cuáles serían los límites marcados con border-image-slice. Una vez hecho esto, conseguiremos el resultado de la imagen de la derecha, en el cuál podremos ampliar el texto del elemento lo que queramos, que se adaptará solo a su contenido:

Para ello, utilizaremos el siguiente código CSS, donde antes que nada, establecemos un ancho al elemento con width y un border básico para que, en el caso de navegadores que no soporten border-image, tenga al menos un borde básico y nos sirva también como base a lo que vamos a hacer a continuación:

.borde {
  width: 200px;
  border: 42px solid black;
  border-image-width: 42px;
  border-image-source: url(https://i.imgur.com/YC5PUl6.png);
  border-image-slice: 110;
  border-image-outset: 0px;
  border-image-repeat: repeat;
}

Para establecer los límites y poder utilizar imágenes en los bordes, hemos hecho uso de varias de las propiedades CSS necesarias para los bordes con imágenes. Veamos una por una para ver como funcionan.

La propiedad border-image-width

La propiedad border-image-width indica el tamaño que tendrá el borde de la imagen. El tamaño puede ser indicado con unidades (píxeles o porcentajes, por ejemplo) o como un , sin indicar ninguna unidad, lo que lo tomará como múltiplo del tamaño establecido en border-width.

Propiedad	Valor
border-image-width	1 | | | auto

En nuestro ejemplo, tanto indicarle un valor de 1 como dejarlo sin especificar, sería lo mismo que darle un tamaño de borde de de 42px, pero por ejemplo, si indicamos border-image-width: 2, le estaremos indicando que use un tamaño de 84px. Por otro lado, y al igual que vimos en el apartado de margin, se puede indicar 1, 2, 3 o 4 parámetros .

Consejo: No olvides que hay que indicar también un border-width y un border-style para que el borde CSS esté definido y se pueda visualizar.

La propiedad border-image-source

La propiedad border-image-source establece, mediante la función CSS url(), la imagen que vamos a utilizar para crear nuestro borde con imágenes. Para ello, indicaremos una imagen al igual que lo hacemos con la propiedad background-image:

Propiedad	Valor
border-image-source	none | | url(imagen.png)

Truco: ¡Recuerda que como imagen de fondo puedes usar gradientes de CSS, ya que internamente se interpretan como imágenes!

La propiedad border-image-slice

La propiedad border-image-slice define el desplazamiento de las líneas divisorias de la imagen, o lo que es lo mismo, el tamaño de los bordes. Por defecto, el valor es de 100% (tamaño de ancho completo de la imagen), pero también podemos usar números sin unidad , que simbolizan píxeles de recorte. Se pueden especificar 1, 2, 3 ó 4 parámetros .

Propiedad	Valor
border-image-slice	100% | | fill

Por otro lado, añadiendo la palabra clave opcional fill, indicaremos que queremos rellenar el elemento con el fondo del fragmento 5, que por defecto es descartado. Útil en casos que quieras aprovechar el fondo.

En nuestro caso, nos podría valer tanto con 110 (110 píxeles de recorte) como con 23%, ya que es más o menos la cantidad apropiada para establecer el límite tanto de ancho como de alto.

La propiedad border-image-outset

La propiedad border-image-outset establece el factor de crecimiento (hacia fuera) de la imagen. Muy útil para compensar la imagen si se extiende hasta el contenido. Usar con cuidado, ya que puede desplazar el contenido.

Propiedad	Valor
border-image-outset	0 |

Por defecto, esta propiedad no tiene desplazamiento, o lo que es lo mismo, el valor por defecto es 0.

La propiedad border-image-repeat

Habremos comprobado que en algunas ocasiones, el modo en que se repite la imagen de borde no es la apropiada, o al menos, no es la que más se adapta a nuestro caso específico. Este comportamiento se puede variar mediante la propiedad border-image-repeat:

Propiedad	Valor	Significado
border-image-repeat	[repetición en X e Y]	1 parámetro. Comportamiento de repetición en ambos ejes.
	[rep. en X] [rep. en Y]	2 parámetros. Comportamiento de repetición por separado.

Con dicha propiedad se establece como deben comportarse los fragmentos del borde y el tipo de repetición que deben efectuar. Se puede usar la modalidad de un parámetro en la que se aplica a todos los bordes, o la modalidad de dos parámetros donde estableces diferente comportamiento para los bordes horizontales y verticales.

Esta propiedad puede tomar los siguientes valores:

Valor	Significado
stretch	Los bordes se estiran hasta rellenar el área. Es el valor por defecto.
repeat	Los bordes se repiten hasta rellenar el área.
round	Igual que repeat, pero estira los fragmentos individualmente hasta rellenar el área completa.
space	Igual que repeat, pero añade espacios hasta rellenar el área completa.

Para verlo más claramente, echemos un vistazo a esta representación visual del comportamiento de cada uno:

Es importante recalcar los dos últimos valores (round y space) actúan igual que repeat, pero con un comportamiento ligeramente diferente que nos puede interesar en el caso de que la zona repetida quede descompensada.

Utilizando la imagen y código CSS anterior, obtendríamos un resultado similar a este, que se adaptaría sólo al contenido que escribamos dentro del elemento HTML con clase borde :

Atajo: Bordes con imágenes

Como suele ser costumbre, este tipo de propiedades tienen una propiedad para ahorrar espacio y escribirlo todo de una sola vez. En este caso, la sintaxis es la siguiente:

div {
  /* border-image: <source> <slice> <width> <outset> <repeat> */

  border-image: url(https://i.imgur.com/YC5PUl6.png) 23% 1 0 round;
}