Propiedad CSS border-image-source

La propiedad CSS border-image-source establece la imagen de origen para crear la imagen de borde de un elemento.

La propiedad border-image-source es una de las propiedades CSS3.

Si el valor se establece en "none", o si la imagen no se puede mostrar, se utilizarán los estilos de borde.

Valor inicial	none
Se aplica a	Todos los elementos, excepto los elementos de tabla internos cuando border-collapse es "collapse". También se aplica a ::first-letter.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.borderImageSource = "url()";

Sintaxis

Valores de border-image-source en CSS

css

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

Ejemplo de la propiedad border-image-source:

Ejemplo de código CSS border-image-source

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Resultado

Descripción de CSS border-image-source

Valores

Valor	Descripción
none	No se aplicará ninguna imagen.
image	La ruta de la imagen se aplica como borde.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

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

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

Propiedad CSS border-image-source ​

Sintaxis ​

Ejemplo de la propiedad border-image-source: ​

Resultado ​