La Propiedad BORDER-IMAGE-REPEAT

La propiedad border-image-repeat en CSS define cómo se deben repetir o estirar las regiones del borde de la imagen (definidas por border-image-slice) para que coincidan con las dimensiones del borde del elemento. Es una parte fundamental para lograr el efecto visual deseado al usar imágenes como bordes.

Sintaxis Básica

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

selector {
  border-image-repeat: <repetir>;
}

O, si deseas especificar un comportamiento diferente para la repetición horizontal y vertical:

selector {
  border-image-repeat: <repetir-horizontal> <repetir-vertical>;
}

Donde <repetir> (y sus variantes horizontal y vertical) pueden ser uno de los siguientes valores:

• stretch: La imagen del borde se estira para llenar el espacio disponible.
• repeat: La imagen del borde se repite para llenar el espacio. Si el espacio no es un múltiplo exacto del tamaño de la imagen, los bordes podrían aparecer cortados.
• round: La imagen del borde se repite para llenar el espacio. Si el espacio no es un múltiplo exacto, la imagen se escala ligeramente para que un número entero de repeticiones encaje sin cortes.
• space: La imagen del borde se repite para llenar el espacio. Si el espacio no es un múltiplo exacto, se añade espacio entre las repeticiones para llenar el hueco.

Un Solo Valor

Cuando se proporciona un solo valor a border-image-repeat, este se aplica tanto a la repetición horizontal (bordes izquierdo y derecho) como a la vertical (bordes superior e inferior).

Ejemplos:

.repetir-stretch {
  border-image-source: url("border.png"); /* Reemplaza con tu imagen */
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: stretch; /* Estira la imagen en ambas direcciones */
}

.repetir-repeat {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: repeat; /* Repite la imagen en ambas direcciones */
}

.repetir-round {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round; /* Repite y ajusta la escala si es necesario */
}

.repetir-space {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: space; /* Repite y añade espacio si es necesario */
}

Dos Valores

Cuando se proporcionan dos valores, el primero define la repetición horizontal y el segundo la repetición vertical.

Ejemplos:

.repetir-horizontal-stretch-vertical-repeat {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: stretch repeat; /* Estira horizontalmente, repite verticalmente */
}

.repetir-horizontal-round-vertical-space {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round space; /* Repite horizontalmente ajustando la escala, repite verticalmente con espacio */
}

Entendiendo los Valores Visualmente

Para comprender mejor cómo funcionan los diferentes valores, considera una imagen de borde que has dividido en nueve secciones usando border-image-slice: las cuatro esquinas y los cuatro bordes (superior, derecho, inferior, izquierdo), además de la región central (si la incluyes con fill). La propiedad border-image-repeat afecta cómo se renderizan los cuatro bordes:

• stretch: Los bordes superior e inferior se estiran horizontalmente, y los bordes izquierdo y derecho se estiran verticalmente para llenar el espacio.
• repeat: Los bordes superior e inferior se repiten horizontalmente, y los bordes izquierdo y derecho se repiten verticalmente. Si la repetición no encaja exactamente, la imagen se corta.
• round: Similar a repeat, pero si la repetición no encaja, el navegador ajusta ligeramente la escala de la imagen para que un número entero de repeticiones quepa sin cortes. Esto puede hacer que las imágenes aparezcan un poco comprimidas o expandidas.
• space: Similar a repeat, pero si la repetición no encaja, el navegador inserta espacio entre las repeticiones para llenar el espacio restante.

Relación con Otras Propiedades de border-image

Recuerda que border-image-repeat no funcionará por sí sola. Necesitas tener definidas al menos las propiedades border-image-source (la imagen que se va a usar) y border-image-slice (cómo se va a dividir la imagen). También es importante establecer un border-width para que el borde de imagen tenga un espacio donde dibujarse.

Ejemplo Práctico Completo

Vamos a crear un ejemplo donde se muestren los diferentes valores de border-image-repeat:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .elemento {
    width: 100%;
    height: 150px;
    padding: 20px;
    border: 30px solid transparent; /* Borde transparente para que se vea el border-image */
    font-family: sans-serif;
    text-align: center;
    box-sizing: border-box; /* Importante para que el padding no aumente el tamaño total */
  }

  .borde-imagen {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 27;
    border-image-width: 30px;
  }

  .stretch {
    border-image-repeat: stretch;
  }

  .repeat {
    border-image-repeat: repeat;
  }

  .round {
    border-image-repeat: round;
  }

  .space {
    border-image-repeat: space;
  }

  .stretch-repeat {
    border-image-repeat: stretch repeat;
  }

  .round-space {
    border-image-repeat: round space;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento borde-imagen stretch">repeat: stretch</div>
    <div class="elemento borde-imagen repeat">repeat: repeat</div>
    <div class="elemento borde-imagen round">repeat: round</div>
    <div class="elemento borde-imagen space">repeat: space</div>
    <div class="elemento borde-imagen stretch-repeat">repeat: stretch repeat</div>
    <div class="elemento borde-imagen round-space">repeat: round space</div>
  </div>

</body>
</html>

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

Casos de Uso Comunes

• Crear patrones de borde sin cortes: Utiliza round para asegurar que las repeticiones de la imagen encajen perfectamente ajustando su tamaño.
• Ajustar una imagen de borde específica a diferentes tamaños de contenedor: stretch puede ser útil cuando la imagen no está diseñada para repetirse.
• Crear bordes con espaciado entre los elementos de la imagen: space puede dar un efecto visual interesante.
• Patrones de repetición simples: repeat es adecuado para imágenes que se repiten bien sin necesidad de ajustes.

Compatibilidad del Navegador

La propiedad border-image-repeat 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

• La elección del valor de border-image-repeat dependerá del diseño que quieras lograr y de la naturaleza de la imagen que estés utilizando como borde.
• Experimenta con diferentes valores para ver cuál se adapta mejor a tus necesidades.

Conclusión

La propiedad border-image-repeat es esencial para controlar cómo se visualiza tu borde de imagen. Al comprender las diferencias entre stretch, repeat, round y space, puedes crear bordes personalizados que se adapten perfectamente a tus diseños web y proporcionar una apariencia visual única a tus elementos.