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