Propiedad CSS border-image

La propiedad abreviada border-image permite especificar una imagen como borde alrededor de un elemento.

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

Esta propiedad abreviada combina varias propiedades individuales de border-image. Los valores omitidos tienen por defecto sus valores iniciales. Consulta las notas para cada subpropiedad a continuación:

border-image-source - Si el valor es "none" o si la imagen no se puede mostrar, se utilizarán los estilos de borde.
border-image-slice - La parte central de la imagen se trata como completamente transparente, a menos que se establezca el valor "fill".
border-image-width - Si el valor de esta propiedad es mayor que el border-width del elemento, la imagen del borde se extenderá más allá del borde de padding (y/o content). También debes saber que esta propiedad puede especificarse con uno, dos, tres o cuatro valores.
border-image-outset - También puede especificarse con uno, dos, tres o cuatro valores.
border-image-repeat - Puede especificarse con dos valores. Si se omite el segundo valor, se asume que es igual al primero. Cuando se establece un solo valor, se aplica el mismo comportamiento en los cuatro lados; si se establecen dos valores, el primero se aplica a la parte superior e inferior y el segundo a la izquierda y derecha.

Propiedad	Valor
Valor inicial	none 100% 1 0 stretch
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.borderImage = "url(border.png) 30 round"

Sintaxis

Sintaxis de la propiedad CSS border-image

css

border-image: source slice width outset repeat | initial | inherit;

Ejemplo de la propiedad border-image:

Ejemplo de la propiedad CSS border-image

html

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

Try it Yourself »

Resultado

Captura de pantalla de la propiedad border-image

Ejemplo de la propiedad border-image con múltiples valores:

Ejemplo de la propiedad CSS border-image con diferentes valores

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
border-image-source	Especifica la imagen de origen que se utiliza para crear la imagen del borde. Puede ser una URL, un URI de datos, un degradado CSS o un SVG en línea.
border-image-slice	Especifica cómo recortar la imagen especificada por border-image-source. La imagen siempre se recorta en nueve secciones: cuatro esquinas, cuatro bordes y el centro.	Probarlo »
border-image-width	Especifica el ancho de la imagen del borde.
border-image-repeat	Especifica si la imagen del borde se repite, redondea o estira.	Probarlo »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué es cierto sobre la propiedad CSS border-image según el contenido de la URL especificada?

La propiedad CSS border-image es una propiedad abreviada para establecer las propiedades individuales de la imagen del borde, es decir, border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat en una sola declaración.La propiedad border-image no permite a los desarrolladores especificar una imagen que se utilice como borde alrededor de un elemento.La propiedad border-image se puede utilizar con todos los elementos HTML.La propiedad CSS border-image no se puede animar y no se aplica a los elementos de tabla cuando border-collapse está configurado como collapse.La propiedad CSS border-image requiere solo un valor para funcionar.

Propiedad CSS border-image ​

Sintaxis ​

Ejemplo de la propiedad border-image: ​

Resultado ​

Ejemplo de la propiedad border-image con múltiples valores: ​

Valores ​