Con la propiedad CSS border-image, puedes configurar una imagen para usarla como borde alrededor de un elemento.

La propiedad CSS border-image

La propiedad CSS border-image  permite especificar una imagen para usar en lugar del borde normal alrededor de un elemento.

La propiedad tiene tres partes:

  • La imagen a usar como borde
  • Dónde cortar la imagen
  • Define si las secciones intermedias deben repetirse o estirarse

La propiedad border-image toma la imagen y la divide en nueve secciones, como un tablero de tres en raya. Luego coloca las esquinas en las esquinas y las secciones centrales se repiten o se estiran según lo especifique.

Nota: Para que la imagen de borde funcione, el elemento también necesita que se establezca la propiedad de borde.

Aquí, las secciones centrales de la imagen se repiten para crear el borde:

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>La propiedad border-image</h1>

<p>Aquí, las secciones centrales de la imagen se repiten para crear el borde:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Esta es la imagen original:</p><img src="border.png">
<p><strong>Ojo:</strong> Internet Explorer 10 y versiones anteriores 
no admiten la propiedad border-image.</p>

</body>
</html>

Sugerencia: La propiedad border-image es en realidad una propiedad abreviada para las propiedades border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.

Resumen

Property Description
border-image Una propiedad abreviada para configurar todas las propiedades border-image-*
border-image-source Especifica la ruta a la imagen que se usará como borde
border-image-slice Especifica cómo cortar la imagen del borde
border-image-width Especifica los anchos de la imagen del borde.
border-image-outset Especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde.
border-image-repeat Especifica si la imagen del borde debe repetirse, redondearse o estirarse