Propiedad CSS border-image-source

La propiedad CSS border-image-source establece la imagen que se usa para dibujar el borde de un elemento en lugar del border-style habitual. Responde a la pregunta "qué imagen debe recortarse y colocarse alrededor del contenedor?", mientras que las propiedades complementarias deciden cómo se corta y se distribuye esa imagen.

Esta página cubre qué valores acepta border-image-source, cómo coopera con las demás propiedades border-image-*, los problemas que hacen que un borde de imagen desaparezca silenciosamente, y ejemplos ejecutables que puedes editar.

border-image-source es una de las propiedades de CSS3 y casi siempre se define junto con border-image-slice a través de la abreviatura border-image.

Cuándo usarlo

Recurre a un borde de imagen cuando un border simple no puede expresar el aspecto que deseas — un marco decorativo, una cinta, un borde dibujado a mano o un contorno degradado. Dado que el origen puede ser cualquier imagen, incluido un degradado CSS, se consiguen efectos que border-color por sí solo no puede producir.

Cómo encaja border-image-source con las demás propiedades

border-image-source solo nombra la imagen. Cuatro propiedades hermanas controlan el resto, y un borde de imagen no se renderiza hasta que también se establece border-image-slice:

border-image-slice — divide el origen en 9 regiones (4 esquinas, 4 bordes, 1 centro).
border-image-width — el grosor del borde de imagen dibujado.
border-image-outset — hasta qué punto la imagen se extiende más allá del cuadro del borde.
css-border-image-repeat-property — si los fragmentos de los bordes se stretch (estiran), repeat (repiten) o round (redondean).

Advertencias importantes

Establece primero un border. Un borde de imagen rellena el área definida por el borde del elemento, por lo que aún necesitas un border-width (habitualmente border: 10px solid transparent;). Sin ancho de borde no hay nada donde pintar.
border-image-slice es obligatorio. Establecer solo el origen no muestra nada; el navegador necesita los valores de corte para saber dónde están las esquinas.
none o una carga fallida recurre a border-style. Si la imagen no puede mostrarse, se utilizan los estilos de borde normales — proporciona un border-style visible al elemento como red de seguridad.

Valor inicial	none
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.borderImageSource = "url()";

Sintaxis

Valores de CSS border-image-source

border-image-source: none | image | initial | inherit;

Ejemplo de la propiedad border-image-source:

Ejemplo de código CSS border-image-source

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Descripción de CSS border-image-source](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)

Ejemplo con un degradado CSS como origen

El origen no tiene por qué ser un archivo — cualquier imagen CSS funciona, incluidos los degradados. Esto dibuja un marco colorido sin ningún recurso de imagen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image-source: linear-gradient(45deg, #6610f2, #20c997);
        border-image-slice: 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Aquí border-image-slice: 1 recorta un solo píxel, lo que es suficiente para un degradado suave porque el degradado continúa a lo largo de cada borde.

Valores

Valor	Descripción
none	No se usa ninguna imagen; el elemento recurre a su `border-style`. Este es el valor predeterminado.
image	Cualquier `<image>` CSS: un `url()` a un archivo, o un degradado como `linear-gradient(...)` / `radial-gradient(...)`.
initial	Establece la propiedad a su valor predeterminado (`none`).
inherit	Hereda el valor del elemento padre.

Propiedades relacionadas

border-image — la abreviatura para las cinco propiedades border-image-*.
border-image-slice — necesario para renderizar la imagen.
border-image-width y border-image-outset — tamaño y desbordamiento.
border-image-repeat — cómo se repiten los bordes en mosaico.

Práctica

¿Cuál es el uso correcto de la propiedad border-image-source en CSS?

La propiedad border-image-source puede usarse con una URL para especificar la ruta de la imagen.La propiedad border-image-source puede incluir un código de color como valor.La propiedad border-image-source se especifica con la palabra clave 'none' cuando no se usa una imagen.La propiedad border-image-source puede aceptar una serie de números como valor para personalizar el ancho del borde.