Propiedad CSS border-image-width
La propiedad CSS border-image-width define el ancho de la imagen del borde.
La propiedad border-image-width es una de las propiedades CSS3.
Puede tener de uno a cuatro valores: los lados superior, derecho, inferior e izquierdo.
Podemos usar uno, dos, tres o cuatro valores. Si se define un valor, se aplica el mismo ancho a los cuatro lados. Si se definen dos valores, el primero se aplica al superior e inferior, y el segundo al izquierdo y derecho. Si se definen tres valores, el primero se aplica al superior, el segundo al izquierdo y derecho, y el tercero al inferior. Si se definen cuatro valores, los anchos se aplican al superior, derecho, inferior e izquierdo, respectivamente (como en un reloj). Esto significa que si se omite el cuarto valor, es lo mismo que el segundo. Si se omite el tercero, es lo mismo que el primero. Si se omite el segundo, es lo mismo que el primero.
| Valor inicial | 1 |
|---|---|
| Se aplica a | Todos los elementos, excepto los elementos internos de tabla cuando border-collapse es collapse. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderImageWidth = "20px"; |
Sintaxis
Sintaxis de la propiedad CSS border-image-width
border-image-width: number | % | auto | initial | inherit;Ejemplo de la propiedad border-image-width:
Ejemplo de la propiedad CSS border-image-width con valor en px
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20;
border-image-repeat: round;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>Ejemplo de border-image-width</h1>
<p class="border">Aquí el border-image-width se establece en 20px.</p>
</body>
</html>Resultado
A continuación se muestra otro ejemplo donde puedes ver qué cambiará si se utilizan uno, dos, tres o cuatro valores.
Ejemplo de la propiedad border-image-width con diferentes valores:
Ejemplo de la propiedad CSS border-image-width con dos, tres y cuatro valores
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px;
}
.border3 {
border: 10px solid transparent;
padding: 40px;
border-image: url("https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px;
}
.border4 {
border: 10px solid transparent;
padding: 55px;
border-image: url("https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px 55px;
}
</style>
</head>
<body>
<h1>Ejemplo de border-image-width</h1>
<p class="border1">Aquí el border-image-width se establece en 20px.</p>
<p class="border2">Aquí el border-image-width se establece en 20px y 10px.</p>
<p class="border3">Aquí el border-image-width se establece en 20px, 10px y 40px.</p>
<p class="border4">Aquí el border-image-width se establece en 20px, 10px, 40px y 55px.</p>
</body>
</html>Valores
| Valor | Descripción | Probarlo » |
|---|---|---|
| length | Una unidad de longitud (px) que define el tamaño del border-width. | Probarlo » |
| number | El ancho del borde se define como un múltiplo del correspondiente border-width. No debe ser negativo y su valor predeterminado es 1. | Probarlo » |
| percentage | Se calcula en relación con el ancho del área de la imagen del borde para desplazamientos horizontales y con la altura del área de la imagen del borde para desplazamientos verticales. | Probarlo » |
| auto | El ancho del borde se iguala al ancho o alto intrínseco del correspondiente border-image-slice. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad 'border-image-width' en CSS?