CSS3 - Imagen de borde

La propiedad de imagen de borde CSS se utiliza para agregar un borde de imagen a algunos elementos. No es necesario utilizar ningún código HTML para llamar a la imagen del borde. Una sintaxis de muestra de la imagen del borde es la siguiente:

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

Los valores más utilizados se muestran a continuación:

No Señor. Valor y descripción
1

border-image-source

Se usa para establecer la ruta de la imagen
2

border-image-slice

Se usa para cortar la imagen del borde
3

border-image-width

Se utiliza para establecer el ancho de la imagen del borde
4

border-image-repeat

Se utiliza para configurar la imagen del borde como redondeada, repetida y estirada

Ejemplo

A continuación se muestra el ejemplo que demuestra cómo establecer una imagen como borde para elementos.

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id = "borderimg1">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>

Producirá el siguiente resultado: