Propiedad CSS border-image
La propiedad abreviada CSS border-image permite usar una imagen como borde de un elemento. Ve ejemplos y pruébalos tú mismo.
La propiedad abreviada border-image te permite usar una imagen —o un gradiente de CSS— como borde de un elemento, en lugar de una línea sólida simple. Es una de las propiedades de CSS3.
Esta página explica cómo funciona la propiedad (el modelo de nueve fragmentos que la sustenta), la sintaxis de la forma abreviada, varios ejemplos ejecutables y cuándo tiene sentido usar border-image.
Cómo funciona border-image: el modelo de nueve fragmentos
El truco que hace funcionar border-image es el recorte en nueve partes. El navegador toma la imagen fuente y la corta con cuatro líneas —dos horizontales, dos verticales— en nueve regiones:
- 4 esquinas se colocan en las cuatro esquinas del elemento y nunca se estiran ni se repiten.
- 4 bordes (superior, derecho, inferior, izquierdo) llenan el espacio entre las esquinas. Se estiran, repiten, redondean o espacian según border-image-repeat.
- 1 centro se descarta por defecto, por lo que el fondo del elemento se muestra a través. Añade la palabra clave
filla border-image-slice para conservarlo.
La posición de esas líneas de corte está controlada por border-image-slice. Este modelo es la razón por la que una imagen pequeña de un marco decorativo puede envolver un cuadro de cualquier tamaño sin distorsionar las esquinas.
Importante:
border-imagesolo se dibuja cuando el elemento tiene realmente un borde. Debes asignarle al elemento unborder-style(o la forma abreviada border) distinto denone—por ejemploborder: 10px solid transparent;— de lo contrario no aparecerá nada.
La forma abreviada y sus subpropiedades
Esta forma abreviada combina varias propiedades individuales de border-image. Los valores omitidos toman sus valores iniciales. Consulta las notas de cada subpropiedad a continuación:
- border-image-source - Si el valor es "none", o si la imagen no puede mostrarse, se usarán los estilos de borde.
- border-image-slice - La parte central de la imagen se trata como completamente transparente, a menos que se establezca el valor "fill".
- border-image-width - Si el valor de esta propiedad es mayor que el border-width del elemento, la imagen del borde se extenderá más allá del borde de padding (y/o content). También debes saber que esta propiedad puede especificarse con uno, dos, tres o cuatro valores.
- border-image-outset - También puede especificarse con uno, dos, tres o cuatro valores.
- border-image-repeat - Puede especificarse con dos valores. Si se omite el segundo valor, se asume que es igual al primero. Cuando se establece solo un valor, aplica el mismo comportamiento en los cuatro lados; si se establecen dos valores, el primero se aplica a la parte superior e inferior, y el segundo a la izquierda y derecha.
| Propiedad | Valor |
|---|---|
| Valor inicial | none 100% 1 0 stretch |
| Se aplica a | Todos los elementos, excepto los elementos internos de tablas cuando border-collapse es "collapse". También se aplica a ::first-letter. |
| Heredable | No |
| Animable | No |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderImage = "url(border.png) 30 round" |
Sintaxis
Sintaxis de la propiedad CSS border-image
border-image: source slice width outset repeat | initial | inherit;Ejemplo de la propiedad border-image:
Ejemplo de la propiedad CSS border-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 10%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">border-image: 10% round;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Resultado
Ejemplo de la propiedad border-image con múltiples valores:
Ejemplo de la propiedad CSS border-image con distintos valores
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 30%;
border-image-repeat: repeat;
border-image-width: 15px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 20%;
border-image-repeat: round;
border-image-width: 10px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 15%;
border-image-repeat: space;
border-image-width: 20px;
}
</style>
</head>
<body>
<h2>Border-image example with all values.</h2>
<p class="border">border-image: 30% 15px repeat</p>
<p class="border2">border-image: 20% 10px round;</p>
<p class="border3">border-image: 15% 20px space;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Uso de un gradiente CSS como borde
border-image-source acepta un gradiente además de una URL, por lo que puedes crear un borde colorido sin ningún archivo de imagen. El gradiente se trata exactamente igual que una imagen y se recorta de la misma manera.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.gradient-border {
border: 12px solid transparent;
padding: 15px;
border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
}
</style>
</head>
<body>
<p class="gradient-border">A border drawn from a CSS gradient.</p>
</body>
</html>El 1 después del gradiente es el valor de border-image-slice. Como un gradiente no tiene bordes reales que proteger, recortarlo en 1 simplemente mapea los cuatro lados y esquinas sobre el borde sin distorsión.
Cuándo usar border-image
Recurre a border-image cuando un único color sólido no es suficiente:
- Marcos decorativos o temáticos — bordes ornamentados, dibujados a mano o de papel rasgado que serían imposibles con
border-style. - Bordes degradados — consulta el ejemplo anterior; mucho más sencillo que simularlo con un elemento envolvente y
background-clip. - Patrones repetidos — un pequeño mosaico que envuelve cajas de cualquier tamaño gracias al modelo de nueve fragmentos.
Para esquinas redondeadas simples usa border-radius; para una línea de color normal usa la forma abreviada estándar border — son más ligeras y animables, mientras que border-image no lo es.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| border-image-source | Especifica la imagen fuente que se usa para crear la imagen del borde. Puede ser una URL, URI de datos, gradiente CSS o SVG en línea. | |
| border-image-slice | Especifica cómo recortar la imagen indicada por border-image-source. La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el centro. | Pruébalo » |
| border-image-width | Especifica el ancho de la imagen del borde. | |
| border-image-repeat | Especifica si la imagen del borde se repite, redondea o estira. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
border-image es compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera). Como recurre automáticamente al border-style/border-color que hayas definido, puedes usarlo sobre un borde normal como mejora progresiva: los navegadores más antiguos o sin soporte mostrarán el borde simple, y los más nuevos mostrarán la imagen.