La propiedad border-image
La propiedad border-image utiliza una imagen para trazar el borde de un elemento HTML y es el método abreviado de border-image-source, border-image-slice, border-image-width, border-image-outset, y border-image-repeat.
border-image-source
La propiedad border-image-source establece el origen ( src ) de la imagen que queremos utilizar para dibujar el borde. En los siguientes ejemplos voy a utilizar imágenes SVG, pero pueden ser utilizadas todo tipo de imágenes e incluso degradados ( gradients ).
La imagen svg que voy a utilizar es la siguiente:
border-image-slice
El css toma esta imagen y, entre bastidores, la divide ( slice ) en nueve segmentos.
Los segmentos de 1 a 4 serán utilizados para dibujar las esquinas mientras que los segmentos de 5 a 8 serán utilizados para los lados.
See the Pen border-image FORK by Gabi (@enxaneta) on CodePen.
A continuación ejemplo interactivo para entender mejor la propiedad border-image-slice. Puede deslizar los puntos rojos parta modificar el valor de border-image-slice. ¡Pruébalo!
See the Pen border-image-slice playground by Pogany (@giaco) on CodePen.
El segmento número 9 no será utilizado al menos que utilizamos la palabra clave fill.
border-image-slice: 4.5 fill;
En el ejemplo anterior estoy utilizando fill. Esta es la razón por la cual el elemento #border-image tiene un color de fondo azulado.
#border-image-repeat
La propiedad border-image-repeat establece como repetir la imagen para dibujar los lados, y puede tomar una o dos palabras clave. Si el valor de border-image-repeat es una sola palabra clave tanto los lados horizontales como los verticales tendrán el mismo estilo de repetición. Su el valor de border-image-repeat son dos palabras clave, la primera palabra establece como repetir la imagen para dibujar los lados horizontales mientras que la segunda establece como repetir la imagen para dibujar los lados verticales.
Las palabras clave que pueden ser utilizadas son: stretch, round, repeat, o space,
stretch: Después de dibujar las esquinas, los segmentos 5 - 8 serán estirados para llenar el espacio correspondiente entre las esquinas.
repeat: Después de dibujar las esquinas, los segmentos 5 - 8 serán repetidos para llenar el espacio correspondiente entre las esquinas. Si no encajan a la perfección los fragmentos de imagen pueden ser recortados para que quepan.
round: Después de dibujar las esquinas, los segmentos 5 - 8 serán repetidos para llenar el espacio correspondiente entre las esquinas. Los fragmentos de imagen podrán ser estirados para encajar a la perfección en el espacio disponible;
space: La normativa dice que los fragmentos de imagen serán espaciados para encajar a la perfección en el espacio disponible. La verdad es que esto todavía no funciona en ningún navegador. Esperemos que lo será en un futuro.
See the Pen border-image-repeat by Gabi (@enxaneta) on CodePen.
border-image-width
La propiedad border-image-width se utiliza para redimensionar los fragmentos de imagen utilizados para crear el borde.
Puede tomar valores numéricos por ejemplo border-image-width:3.
En este caso la anchura de los fragmentos de imagen será 3 veces el valor especificado del borde. Por ejemplo si border-width :10px la anchura de los fragmentos de imagen será de 3 * 10 = 40px;
Puede tomar valores en px, em, etc... Por ejemplo border-image-width:17px.
Exactamente como en el caso de border-width puede tomar 1, 2, 3 o 4 valores
Al ejemplo anterior he añadido un deslizador para variar el valor de border-image-width. ¡Pruébalo!
See the Pen border-image-width by Gabi (@enxaneta) on CodePen.
border-image-outset
Por defecto el borde que utiliza la imagen esta pintado dentro de los limites de la caja. La propiedad border-image-outset amplía la área donde poder dibujar el borde.
Puede tomar valores numéricos por ejemplo border-image-outset:4. En este caso la área dentro de cual es posible dibujar los fragmentos de imagen será ampliada a 4 veces el valor especificado de la anchura del borde.
También puede tomar valores en px, em, etc... Por ejemplo border-image-outset:20px.En este caso la área dentro de cual es posible dibujar los fragmentos de imagen será ampliada en 20px.
Exactamente como en el caso de border-width puede tomar 1, 2, 3 o 4 valores.
En el siguiente ejemplo hay dos elementos .bi. El primer elemento tiene border-image-outset:0 (el valor por defecto) mientras que el segundo tiene border-image-outset:2. Los dos elementos tienen un outline: 1px solid rgba(0,0,0,.5); para que sea claro como la propiedad border-image-outset amplía la área donde esta dibujado el borde.
See the Pen border-image-offset by Gabi (@enxaneta) on CodePen.