La propiedad border-image en CSS se usa para especificar el borde de una imagen. Esta propiedad crea un borde utilizando una imagen en lugar de un borde normal. La propiedad contiene tres partes que se enumeran a continuación:
- La imagen completa se utiliza como borde.
- La porción de imagen se usa como borde
- La sección central de la imagen se usa (repetida o estirada) como borde
La propiedad border-image se utiliza para dividir una imagen en nueve secciones, como un tablero de tres en raya.
Sintaxis:
element {
border-image: url(border.png);
}
propiedades de imagen de borde: hay muchas propiedades de imagen de borde que se enumeran a continuación:
- border-image-source: esta propiedad se utiliza para establecer la ruta de la imagen.
- border-image-width: esta propiedad se utiliza para establecer el ancho de la imagen del borde.
- border-image-slice: esta propiedad se utiliza para cortar el borde de la imagen.
- border-image-repeat: esta propiedad se utiliza para establecer el borde de la imagen como redondeado, repetido y estirado.
- border-image-outset: esta propiedad se usa para especificar la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | Border Images
</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png)
30 stretch;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png)
20% round;
}
div {
margin-top:20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>border-image property</h2>
<div class = "border1">Border 1</div>
<div class = "border2">Border 2</div>
<div class = "border3">Border 3</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-image se enumeran a continuación:
- Google Chrome 16.0
- Internet Explorer 11.0
- Firefox 15.0
- Ópera 15.0
- Safari 6.0