La propiedad border-image-source se utiliza para especificar la fuente de la imagen que se establecerá como borde de un elemento.
Sintaxis:
border-image-source: url(image-path.png)| none| initial| inherit;
Nota: si el valor es ninguno, se utilizarán los estilos de borde. La imagen especificada se puede dividir en regiones con la ayuda de la propiedad border-image-slice .
Valor por defecto: Su valor por defecto es ninguno.
Valores:
- ninguno: no se especifica ninguna imagen.
- imagen: se utiliza para especificar la ruta de la imagen que se utilizará como borde de un elemento.
- initial: Inicializa la propiedad con su valor predeterminado.
- heredar: Toma el valor del elemento padre.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-image-source Property
</title>
<style>
body {
text-align:center;
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: 50;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>border-image-source property</h2>
<div class = "border1">GEEKSFORGEEKS</div>
</body>
</html>
Producción:
Navegadores compatibles: Los navegadores compatibles con CSS | Las propiedades border-image-source se enumeran a continuación:
- cromo 15.0
- Borde 11.0
- Firefox 15.0
- Ópera 15.0
- Safari 6.0
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA