La Propiedad BORDER-IMAGE-WIDTH

La propiedad border-image-width en CSS se utiliza para especificar el ancho de la imagen que se utiliza como borde alrededor de un elemento.

La propiedad border-image-width en CSS se utiliza para especificar el ancho de la imagen que se utiliza como borde alrededor de un elemento. Esta propiedad determina el grosor visual del borde de la imagen y cómo se aplica al elemento.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-image-width es la siguiente:

CSS 

selector {
  border-image-width: <ancho>;
}

Donde <ancho> puede ser uno, dos, tres o cuatro valores, que pueden ser:

Valores de longitud: Especificados en píxeles (px), ems (em), rems (rem), etc.
Valores de porcentaje: Especificados como un porcentaje (%) del ancho (para los bordes izquierdo y derecho) y la altura (para los bordes superior e inferior) del elemento.
auto: El ancho de la imagen del borde se calcula automáticamente en función del ancho intrínseco de la imagen de origen (o su altura, dependiendo del borde).

Especificando Diferentes Anchos para Cada Borde

Al igual que con otras propiedades de borde, puedes especificar diferentes anchos para cada lado del elemento.

Un valor: Se aplica el mismo ancho a los cuatro lados.

CSS 

.un-ancho {
  border-image-source: url("border.png"); /* Reemplaza con tu imagen */
  border-image-slice: 30;
  border-width: 30px; /* Asegúrate de que el border-width sea igual o mayor */
  border-image-width: 20px; /* Ancho de la imagen del borde de 20px en todos los lados */
  border-style: solid; /* Necesitas un estilo de borde */
}

Dos valores: El primer valor se aplica a los anchos superior e inferior, y el segundo valor se aplica a los anchos derecho e izquierdo.

CSS 

.dos-anchos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 30px;
  border-image-width: 15px 35px; /* Arriba y abajo: 15px; Derecha e izquierda: 35px */
  border-style: solid;
}

Tres valores: El primer valor se aplica al ancho superior, el segundo a los anchos derecho e izquierdo, y el tercero al ancho inferior.

CSS 

.tres-anchos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 30px;
  border-image-width: 10px 25px 20px; /* Arriba: 10px; Derecha e izquierda: 25px; Abajo: 20px */
  border-style: solid;
}

Cuatro valores: Los valores se aplican en el orden: superior, derecho, inferior, izquierdo.

CSS 

.cuatro-anchos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 30px;
  border-image-width: 5px 10px 15px 20px; /* Arriba: 5px; Derecha: 10px; Abajo: 15px; Izquierda: 20px */
  border-style: solid;
}

Usando porcentajes: Los porcentajes se calculan con respecto al ancho del elemento para los bordes horizontalmente adyacentes (izquierdo y derecho) y con respecto a la altura del elemento para los bordes verticalmente adyacentes (superior e inferior).

CSS 

.ancho-porcentaje {
  width: 300px;
  height: 200px;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 10%; /* El border-width también puede ser un porcentaje */
  border-image-width: 10% 5%; /* Arriba y abajo: 10% de la altura; Derecha e izquierda: 5% del ancho */
  border-style: solid;
}

Usando auto: Cuando se utiliza auto, el ancho del borde de la imagen se determina por el ancho intrínseco (o altura) de la sección correspondiente de la imagen de origen (definida por border-image-slice).

CSS 

.ancho-auto {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 30px;
  border-image-width: auto; /* Utiliza el ancho intrínseco de la imagen cortada */
  border-style: solid;
}

.ancho-mixto-auto {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-width: 30px;
  border-image-width: 20px auto 15px; /* Arriba: 20px; Derecha e izquierda: auto; Abajo: 15px */
  border-style: solid;
}

Relación con Otras Propiedades de `border-image`

La propiedad border-image-width trabaja en conjunto con otras propiedades de border-image:

border-image-source: Especifica la imagen a utilizar.
border-image-slice: Define cómo se corta la imagen de origen en nueve regiones. El ancho de estas regiones intrínsecas puede influir en el comportamiento de border-image-width: auto.
border-width: Define el grosor del borde del elemento. La imagen del borde se dibuja dentro de este espacio. Si border-image-width es mayor que border-width, la imagen del borde podría superponerse al contenido del elemento o extenderse más allá de los límites del borde.
border-image-repeat: Define cómo se repiten o estiran las partes de la imagen del borde.
border-image-outset: Especifica cuánto se extiende la imagen del borde más allá del borde del elemento.

Ejemplo Práctico

Vamos a crear un ejemplo donde se muestren diferentes anchos de la imagen del borde:

HTML:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .elemento {
    width: 150px;
    height: 100px;
    padding: 10px;
    border: 30px solid transparent; /* Borde transparente para que se vea el border-image */
    font-family: sans-serif;
    text-align: center;
    box-sizing: border-box;
  }

  .borde-imagen {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 27;
    border-style: solid; /* Necesario para border-image */
  }

  .ancho-20px {
    border-image-width: 20px;
  }

  .ancho-10px-40px {
    border-image-width: 10px 40px;
  }

  .ancho-auto {
    border-image-width: auto;
  }

  .ancho-porcentaje-10 {
    border-image-width: 10%;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento borde-imagen ancho-20px">Ancho: 20px</div>
    <div class="elemento borde-imagen ancho-10px-40px">Ancho: 10px (T/B), 40px (D/I)</div>
    <div class="elemento borde-imagen ancho-auto">Ancho: auto</div>
    <div class="elemento borde-imagen ancho-porcentaje-10">Ancho: 10%</div>
  </div>

</body>
</html>

En este ejemplo, cada elemento utiliza la misma imagen de borde y los mismos valores de border-image-source y border-image-slice. La única diferencia es el valor de border-image-width, lo que te permitirá observar cómo afecta el grosor visual del borde de la imagen.

Casos de Uso Comunes

Ajustar el grosor visual de un borde de imagen decorativo.
Crear bordes de imagen con diferentes grosores en diferentes lados del elemento.
Utilizar el ancho intrínseco de las partes de la imagen para un diseño más natural.
Adaptar el grosor del borde de imagen a diferentes tamaños de contenedor utilizando porcentajes.

Compatibilidad del Navegador

La propiedad border-image-width es compatible con la mayoría de los navegadores modernos. Sin embargo, puede haber algunas diferencias en la implementación o soporte en versiones más antiguas. Es recomendable probar en diferentes navegadores para asegurar la consistencia visual.

Consideraciones

El valor de border-image-width debe ser coherente con el border-width del elemento. Si el border-image-width es mayor que el border-width, la imagen del borde podría superponerse al contenido.
Al usar porcentajes, asegúrate de entender cómo se calculan con respecto a las dimensiones del elemento.
Experimenta con diferentes valores para lograr el efecto visual deseado.

Conclusión

La propiedad border-image-width te proporciona un control preciso sobre el grosor visual de los bordes de imagen en tus diseños web. Al comprender cómo utilizar valores de longitud, porcentajes y la palabra clave auto, puedes crear bordes personalizados que se adapten perfectamente a tus necesidades estéticas y funcionales. Recuerda siempre combinarla con las otras propiedades de border-image para obtener el resultado esperado.