La propiedad CSS border-image-width se usa para establecer el ancho de la imagen del borde. Se puede configurar proporcionando varios valores.
- Si solo se proporciona un valor, se aplica a los cuatro lados.
- Cuando se especifican dos valores, el primer valor se aplica a ‘arriba y abajo’ y el segundo valor se aplica a ‘izquierda y derecha’.
- Cuando se especifican tres valores, el primer valor se da en la parte superior, el segundo lo comparten tanto ‘izquierda como derecha’ y el tercero en la parte inferior.
- Si se dan cuatro valores, se aplican en el orden superior, derecho, inferior e izquierdo (en el sentido de las agujas del reloj).
Sintaxis:
border-image-width: number | % | auto | initial | inherit;
Valor por defecto: Su valor por defecto es 1.
Valores de propiedad:
- Longitud: se utiliza para especificar el valor de manera relativa.
- Porcentaje: se utiliza para especificar el ancho en términos de porcentaje.
- Número: se usa para establecer el ancho como un múltiplo del valor calculado correspondiente del ancho del borde
- Inicial: establece esta propiedad en su valor predeterminado
- Inherit: se utiliza para heredar los valores de los elementos principales.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS|border-image-width Property</title>
<style>
h1,
h2 {
color: green;
}
#gfg {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1 id="gfg">GeeksForGeeks</h1>
<h2 id="gfg">CSS|border-image-width Property</h2>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS|border-image-width Property</title>
<style>
h1,
h2 {
color: green;
}
#geek1 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
border-image-slice: 30;
border-image-width: 10px 20px;
}
#geek2 {
border: 10px solid transparent;
padding: 10px;
border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
border-image-slice: 30;
border-image-width: 1.2rem;
}
#geek3 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
border-image-slice: 30;
border-image-width: 10% 20% 10% 20%;
}
</style>
</head>
<body>
<h1 id="gfg">GeeksForGeeks</h1>
<h2 id="gfg">CSS|border-image-width Property</h2>
<p id="geek1"> Geek one </p>
<p id="geek2"> Geek two </p>
<p id="geek3" style="text-align:center"> Geek three </p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-image-width se enumeran a continuación:
- Google Chrome 15.0
- Borde 12.0
- Internet Explorer 11.0
- Firefox 13.0
- Ópera 15.0
- Apple Safari 6.0