Propiedad CSS border-image-width

La propiedad CSS border-image-width define el ancho de la imagen de borde de un elemento — es decir, qué tan grueso se dibuja el borde basado en imagen alrededor del cuadro. Es una de las propiedades CSS3.

Cuándo usarla

Solo necesitas border-image-width cuando un elemento ya tiene una imagen de borde definida con border-image-source (y normalmente border-image-slice). Por sí sola no hace nada.

Un punto importante a tener en cuenta: border-image-width no es lo mismo que el border-width regular. El border-width simple reserva espacio en el modelo de caja y afecta al diseño, mientras que border-image-width solo controla qué tan ancha se pinta la imagen en esa región de borde. Si haces la imagen más ancha que el borde real, puede desbordarse hacia adentro sobre el relleno/contenido del elemento sin desplazar otro contenido. Por eso la mayoría de los ejemplos establecen primero un border transparente y luego dimensionan la imagen con border-image-width.

Tipos de valores aceptados

El ancho de cada lado puede expresarse de varias formas:

<length> — un tamaño fijo como 20px.
<number> — un multiplicador del border-width correspondiente. border-image-width: 2 significa "el doble del ancho del borde". Este es el tipo usado por el valor inicial 1.
<percentage> — relativo al tamaño del área de la imagen de borde (los porcentajes horizontales usan su ancho, los verticales su alto).
auto — usa el ancho/alto intrínseco del border-image-slice correspondiente, o el border-width correspondiente si no existe un tamaño intrínseco.

Cuántos valores usar

border-image-width acepta de uno a cuatro valores, siguiendo la forma abreviada CSS estándar en sentido horario:

Un valor — se aplica a los cuatro lados.
Dos valores — el primero es arriba/abajo, el segundo es izquierda/derecha.
Tres valores — el primero es arriba, el segundo es izquierda/derecha, el tercero es abajo.
Cuatro valores — arriba, derecha, abajo, izquierda (en sentido horario desde arriba).

Cuando se omite un valor, toma el espejo del lado opuesto: un cuarto valor omitido copia el segundo (izquierda = derecha), un tercer valor omitido copia el primero (abajo = arriba), y un segundo valor omitido copia el primero (así un solo valor se aplica a todo).

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.
Animatable	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("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Aquí hay otro ejemplo donde puedes ver qué cambia si se usan 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("/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("/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("/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("/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>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Pruébalo tú mismo »

En el ejemplo anterior, .border1 usa un solo valor para todos los lados, mientras que .border4 asigna un ancho diferente a cada lado — observa cómo los lados más gruesos pintan más de la imagen hacia adentro.

Propiedades relacionadas

border-image-source — establece qué imagen se usa para el borde.
border-image-slice — divide la imagen fuente en las nueve regiones que forman el borde.
border-image-outset — desplaza la imagen de borde más allá del cuadro de borde.
border-width — el ancho de borde regular que border-image-width multiplica cuando se usa un <number>.

Valores

Valor	Descripción	Pruébalo
length	Una unidad de longitud (px) que define el tamaño del border-width.	Pruébalo »
number	El ancho del borde se define como un múltiplo del border-width correspondiente. No debe ser negativo y el valor por defecto es 1.	Pruébalo »
percentage	Se calcula en relación al ancho del área de la imagen de borde para desplazamientos horizontales y al alto del área de la imagen de borde para desplazamientos verticales.	Pruébalo »
auto	El ancho del borde se iguala al ancho o alto intrínseco del border-image-slice correspondiente.	Pruébalo »
initial	Establece la propiedad a su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'border-image-width' en CSS?

Establece la propiedad de ancho del borde de una imagen.Permite definir la imagen que se usará como borde.Permite ampliar o reducir el área border-image y tiene cuatro valores: arriba, derecha, abajo e izquierda.Establece la imagen de fondo del borde.Permite estilizar los bordes con imágenes.