Propiedad border-image

La propiedad border-image establece una imagen para el borde, es una propiedad abreviada para las propiedades border-image-source, border-image-slice, border-image-repeat, border-image-width y border-image-outset. Sin embargo, la propiedad abreviada apareció en CSS antes que las propiedades individuales y por lo tanto tiene soporte en una mayor cantidad de navegadores antiguos.

Sintaxis

selector {
	border-image: url(ruta a la imagen) desplazamiento/anchura/separación repetición;
}

Descripción

La imagen que queremos aplicar al borde, debe estar formateada de una manera especial: 4 mini imágenes para las esquinas y 4 imágenes para los lados. Ejemplo de tal imagen:

En este caso la parte central se ha dejado blanca (ya que no queremos que se superponga al fondo del elemento). Ejemplo de imagen con la parte central rellena:

El valor slice indica al navegador qué partes de la imagen irán a las esquinas, y cuáles a los lados (y qué parte será la central). A las esquinas van 4 partes, a los lados van 4 partes y una parte (la central) va al fondo del elemento (opcionalmente, palabra clave fill).

La imagen se "corta" en trozos de la siguiente manera: para el valor slice se especifica de uno a cuatro valores. Analicemos con un ejemplo. Supongamos que se especifican los siguientes valores: 10 20 30 40 (no se indican píxeles px, esto se debe a que la imagen puede ser tanto rasterizada como vectorial). Los valores indican lo siguiente: 10 cortar desde arriba, 20 cortar desde la derecha, 30 cortar desde abajo, 40 cortar desde la izquierda. ¿Qué parte de la imagen irá a la esquina superior izquierda? Será el trozo: 10 desde arriba, 40 desde la izquierda. A la esquina superior derecha irá 10 desde arriba, 20 desde la derecha. Y así sucesivamente.

Frecuentemente la imagen es simétrica (como los rombos de arriba) y necesitamos cortar trozos iguales para las esquinas. En ese caso se indica un solo valor, que establecerá los mismos desplazamientos desde todos los lados. Para cortar los rombos naranjas, indicaremos slice en 26 (ya que el rombo naranja tiene un tamaño de 26px por 26px). Los rombos amarillos caerán en las líneas del borde y les sucederá lo siguiente: o se estirarán por todo el bloque o se repetirán a lo largo del borde (depende del valor repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

La propiedad border-image no permite especificar el grosor del borde del elemento. El navegador simplemente estira la imagen a lo largo del borde con el ancho ya existente. Por lo tanto, este debe establecerse mediante la propiedad border.

Los usuarios de navegadores antiguos (o con las imágenes desactivadas) verán un marco estándar, establecido en border, por lo que tiene sentido darle un estilo y color apropiados.

Valores

Valor	Descripción
url(Ruta a la imagen)	Ruta a la imagen. Para más detalles ver `border-image-source`.
desplazamiento	Indica al navegador qué partes de la imagen irán a las esquinas, y cuáles a los lados (y qué parte será la central). Valores posibles: de `1` a `4` números \| de `1` a `4` porcentajes. Separado por espacios se puede añadir la palabra clave `fill` además de los números o porcentajes. Para más detalles ver `border-image-slice`.
anchura	La propiedad controla el ancho de la parte visible del marco, lo escala. Si este valor es mayor que el ancho de `border-width`, la imagen del marco invadirá el contenido. Valores posibles: Unidades CSS \| porcentajes \| número \| `auto`. Para más detalles ver `border-image-width`.
separación	Propiedad interesante, que permite desplazar el marco más allá de los límites del elemento. No se admiten valores negativos. Valores posibles: Unidades CSS (excepto % (?)) \| número positivo \| auto. Para más detalles ver `border-image-outset`.
repetición	Especifica cómo repetir la imagen en los bordes (no en las esquinas): embaldosar o estirar. Valores posibles: `stretch` \| `repeat` \| `round` \| `space`. Para más detalles ver `border-image-repeat`.

Valor por defecto: none 100%/1/0 stretch (url(ruta a la imagen) desplazamiento/anchura/separación repetición).

Ejemplo . border-image-repeat: valor repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . border-image-repeat: valor stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . border-image-repeat: valor round

Actualmente en estado normal está establecido el valor repeat, y al pasar el ratón - round. Presta atención a que antes de pasar el ratón en el borde cabe un número no entero de rombos, y después de pasar el ratón - un número entero. Así es como funciona round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . border-image-repeat: dos palabras

Valor repeat para el ancho y stretch para el alto:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Coincidencia del ancho de la imagen con el ancho del borde

Aumentemos el border-width al pasar el ratón, manteniendo el grosor de border-image igual. Los rombos se estirarán por todo el borde:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . border-image-slice

Tomemos otra imagen, en la que los diferentes trozos no son iguales:

Indiquemos qué partes de la imagen hay que cortar - 25% 30% 10% 20%. Funciona así: 25% - margen superior, 30% - margen derecho, 10% - margen inferior, 20% - margen izquierdo. Básicamente con estos trozos cortamos las esquinas. La esquina superior izquierda será 25% desde la parte superior de la imagen, y 20% desde la izquierda. La esquina superior derecha será 25% desde la parte superior de la imagen, y 30% desde la derecha y así sucesivamente.

Además, si pasas el ratón sobre el bloque, se activará la palabra clave fill, y la parte central de la imagen se convertirá en el fondo de nuestro bloque:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Ejemplo

Hagamos un borde degradado usando el gradiente lineal:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Ejemplo . border-image-width

Establezcamos el valor border-image-width en 2 (la imagen del borde se volverá 2 veces más grande que el propio borde) al pasar el ratón sobre el elemento (26/2 - indicado después de la barra, siendo 26 el valor de border-image-slice). Presta atención a que el borde en sí no aumentó, pero la imagen del borde - sí, por lo que invadirá el texto:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . border-image-outset

Establezcamos el valor border-image-outset en 3 al pasar el ratón sobre el elemento. (26/1/2 - indicado después de la segunda barra, siendo 26 el valor de border-image-slice, y - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Véase también

la propiedad border-image-source,
que establece la ruta a la imagen para el borde
la propiedad border-image-slice,
que establece el corte de la imagen para el borde
la propiedad border-image-repeat,
que establece la repetición de la imagen para el borde
la propiedad border-image-width,
que establece el tamaño de la imagen para el borde
la propiedad border-image-outset,
que establece el desplazamiento de la imagen para el borde