La Propiedad BORDER-IMAGE-OUTSET

La propiedad border-image-outset en CSS especifica cuánto se extiende la imagen del borde más allá del borde del elemento.

 

La propiedad border-image-outset en CSS especifica cuánto se extiende la imagen del borde más allá del borde del elemento. Imagina que tienes una imagen decorativa que usas como borde; esta propiedad te permite controlar si esa imagen se dibuja justo en el límite del borde del elemento o si se extiende un poco hacia afuera.

Sintaxis Básica

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

CSS
 
selector {
  border-image-outset: <desplazamiento>;
}

Donde <desplazamiento> puede ser:

  • Valores de longitud: Especificados en píxeles (px), ems (em), rems (rem), etc. Estos valores indican la distancia en la que la imagen del borde se extenderá hacia afuera.
  • auto: La extensión del borde de la imagen será igual al valor de la propiedad border-image-width para ese lado.

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

Especificando Diferentes Desplazamientos para Cada Borde

La propiedad border-image-outset puede aceptar de uno a cuatro valores para especificar diferentes desplazamientos para cada borde individual. El orden de los valores es: arriba, derecha, abajo, izquierda (siguiendo las agujas del reloj).

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

    CSS
     
    .un-desplazamiento {
  border-image-source: url("border.png"); /* Reemplaza con tu imagen */
  border-image-slice: 30;
  border-image-width: 30px;
  border-image-repeat: round;
  border-width: 30px;
  border-image-outset: 10px; /* Extiende 10px en todos los lados */
}

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

    CSS
     
    .dos-desplazamientos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round;
  border-image-outset: 5px 15px; /* Arriba y abajo: 5px; Derecha e izquierda: 15px */
}

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

    CSS
     
    .tres-desplazamientos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round;
  border-image-outset: 0 20px 10px; /* Arriba: 0px; Derecha e izquierda: 20px; Abajo: 10px */
}

  • Cuatro valores: El primer valor se aplica al desplazamiento superior, el segundo al desplazamiento derecho, el tercero al desplazamiento inferior y el cuarto al desplazamiento izquierdo.

    CSS
     
    .cuatro-desplazamientos {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round;
  border-image-outset: 5px 10px 15px 20px; /* Arriba: 5px; Derecha: 10px; Abajo: 15px; Izquierda: 20px */
}

  • Usando auto:

    CSS
     
    .desplazamiento-auto {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px;
  border-width: 30px;
  border-image-repeat: round;
  border-image-outset: auto; /* La extensión será de 30px en todos los lados (igual a border-image-width) */
}

.desplazamiento-mixto {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 30px 15px 30px 15px; /* Anchos diferentes */
  border-width: 30px 15px 30px 15px;
  border-image-repeat: round;
  border-image-outset: auto 5px; /* Arriba y abajo: 30px (auto); Derecha e izquierda: 5px */
}

Relación con Otras Propiedades de border-image

La propiedad border-image-outset trabaja en conjunto con otras propiedades de border-image para definir la apariencia final del borde de imagen:

  • border-image-source: Especifica la imagen a utilizar.
  • border-image-slice: Define cómo se corta la imagen.
  • border-image-width: Define el ancho del borde de la imagen. border-image-outset: auto se basa en este valor.
  • border-image-repeat: Define cómo se repiten o estiran las partes de la imagen del borde.
  • border-width: Define el ancho del borde del elemento, que sirve como el "marco" para la imagen del borde.

Ejemplo Práctico

Vamos a crear un ejemplo donde se vea claramente el efecto de border-image-outset:

HTML:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    gap: 30px;
    align-items: center;
  }

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

  .sin-desplazamiento {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 27;
    border-image-width: 20px;
    border-image-repeat: round;
    border-image-outset: 0px;
  }

  .con-desplazamiento {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 27;
    border-image-width: 20px;
    border-image-repeat: round;
    border-image-outset: 15px;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento sin-desplazamiento">Sin Outset</div>
    <div class="elemento con-desplazamiento">Con Outset de 15px</div>
  </div>

</body>
</html>

En este ejemplo, ambos elementos utilizan la misma imagen de borde. El elemento "Sin Outset" muestra la imagen del borde justo en el límite del borde transparente del elemento. El elemento "Con Outset de 15px" extiende la imagen del borde 15 píxeles hacia afuera en todos los lados.

Casos de Uso Comunes

  • Crear un efecto de "halo" o sombra alrededor de un elemento.
  • Extender elementos decorativos del borde para un diseño más elaborado.
  • Visualmente conectar un borde de imagen con otros elementos circundantes.

Compatibilidad del Navegador

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

  • Un valor de border-image-outset demasiado grande puede hacer que la imagen del borde se superponga con otros elementos de la página, lo cual podría no ser el resultado deseado.
  • El efecto visual del border-image-outset depende mucho de la imagen utilizada como borde y de los valores de border-image-width y border-width.

Conclusión

La propiedad border-image-outset te brinda control adicional sobre cómo se presenta tu borde de imagen, permitiéndote crear efectos visuales más interesantes y personalizados. Experimenta con diferentes valores para lograr el aspecto deseado en tus diseños web. Recuerda que esta propiedad funciona en conjunto con las otras propiedades de border-image, así que asegúrate de configurarlas correctamente para obtener el resultado esperado.