La propiedad border-image en CSS se usa para establecer el borde de un elemento.
Sintaxis:
border-image: source slice width outset repeat|initial|inherit;
La propiedad border-image es la combinación de muchas propiedades que se enumeran a continuación:
- borde-imagen-fuente
- rebanada-de-imagen-del-borde
- borde-imagen-ancho
- Borde-imagen-outset
- borde-imagen-repetir
Valores de propiedad:
- border-image-source: esta propiedad se utiliza para establecer la ubicación de origen de la imagen del borde.
Sintaxis:border-image-source: url(image source location);
- border-image-slice: la propiedad border-image-slice se usa para dividir o dividir una imagen especificada por la propiedad border-image-source.
La propiedad border-slice divide una imagen dada en:- 9 regiones
- 4 esquinas
- 4 bordes
- Una región media
Sintaxis:
border-image-slice: value;
- border-image-width: la propiedad border-image-width se utiliza para establecer el ancho del borde.
Sintaxis:
border-image-width: value;
- border-image-outset: la propiedad border-image-outset establece la distancia por la que se establece la imagen del borde de un elemento desde su cuadro de borde.
Sintaxis:border-image-outset: value;
- border-image-repeat: la propiedad border-image-repeat define cómo se ajustan las regiones de borde de la imagen de origen para ajustarse a las dimensiones de una imagen de borde de elemento.
Sintaxis:border-image-repeat: value;
- initial: se utiliza para establecer la propiedad border-image en su valor predeterminado.
- heredar: se usa para establecer la propiedad de imagen de borde de su padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
30 round;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
30 round;
text-align:center;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
30 stretch;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
30 stretch;
text-align:center;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "borderimg1">
Element Content
</p>
<p id = "borderimg2">
Element Content
</p>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
50 round;
}
#borderimg2 {
border: 15px solid transparent;
padding: 15px;
border-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
40% stretch;
}
#borderimg3 {
border: 15px solid transparent;
padding: 15px;
border-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png')
70 round;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "borderimg1">BORDER 1</p>
<p id = "borderimg2">BORDER 2</p>
<p id = "borderimg3">BORDER 3</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-image se enumeran a continuación:
- Google Chrome 16.0, 4.0 -webkit-
- Internet Explorer 11.0
- Firefox 15.0, 3.5 -moz-
- Ópera 15.0, 11.0 -o-
- Safari 6.0, 3.1 -webkit-
Publicación traducida automáticamente
Artículo escrito por apeksharustagi1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA