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:

Sistema 9-slice

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.

Vamos a utilizar la siguiente imagen expandible (a la izquierda), que simula ser un antiguo carrete fotográfico, como imagen de borde. 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:

Ejemplo con border-image en CSS

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: 1;
  border-image-source: url(https://i.imgur.com/YC5PUl6.png);
  border-image-slice: 23%;
  border-image-repeat: round;
}

Para establecer los límites y poder utilizar imágenes en los bordes, hemos hecho uso de las siguientes propiedades de CSS:

Propiedad Valor Significado
border-image-width 1 | | | auto Grosor de la imagen de borde.
border-image-source none | url(imagen.png) Imagen a utilizar de molde para el 9-slice.
border-image-slice 100% | | | fill Tamaño de los bordes en la imagen.
border-image-outset 0 | Tamaño en el que el borde crece hacia fuera.
  • 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 sin ellas, lo que lo tomará como múltiplo del tamaño indicado en border-width.

En nuestro ejemplo, tanto indicarle un valor de 1 como dejarlo sin especificar, sería decirle que el tamaño del borde de la imagen será de 42px, pero por ejemplo, si indicamos border-image-width: 2, le estaremos indicando que use un tamaño de 84px. 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 establece, mediante la expresión url(), la imagen que vamos a utilizar para crear nuestro borde con imágenes.

Truco: ¡Como imagen de fondo puedes utilizar un gradiente de CSS, ya que internamente se interpretan como imágenes!

  • La propiedad border-image-slice define la posición 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.

Por otro lado, el valor opcional fill sirve para indicar que quieres 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 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. Por defecto no tiene desplazamiento.

Modo de repetición

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:

Border-image-repeat values

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 :

CSS: Border-image en acción

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;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.