CSS3 - Imagem da borda

A propriedade CSS Border image é usada para adicionar a imagem de fronteira a alguns elementos. Você não precisa usar nenhum código HTML para chamar a imagem de fronteira. Um exemplo de sintaxe de imagem de fronteira é a seguinte -

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

Os valores mais comumente usados ​​são mostrados abaixo -

Sr. Não. Valor e descrição
1

border-image-source

Usado para definir o caminho da imagem
2

border-image-slice

Usado para cortar a imagem do pensionista
3

border-image-width

Usado para definir a largura da imagem do bordo
4

border-image-repeat

Usado para definir a imagem da fronteira como arredondada, repetida e esticada

Exemplo

A seguir está o exemplo que demonstra como definir a imagem como uma borda para os 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>

Isso produzirá o seguinte resultado -