Bordas com imagens

Propriedades das bordas

Border-image-source
border-image-width
border-image-repeat
border-image-outset
border-image-slice

Exemplos


            /* Usando uma imagem na borda */

            border-image-source: url('../img/border.png');


            /* Usando um gradiente */

            border-image-source: linear-gradient(red, blue);


            /* Repetindo a imagem para preencher a borda */

            border-image-source: url('../img/border.png');
            border-image-repeat: repeat;

            border-image-slice: 13.4;


            /* Preenchendo o interior com a image da borda */

            border-image-source: url('../img/border.png');
            border-image-repeat: repeat;

            border-image-slice: 15 fill;


            /* Usando cores com gradiente */

            border-image-source: linear-gradient(red, blue);
            
            border-image-slice: 10;


            /* Ajustando a largura da imagem na borda */

            border-image-source: url('../img/border.png');
            border-image-repeat: repeat;

            border-image-slice: 15;

            border-image-width: 10px 20px 30px 40px;


            border-image-source: url('../img/border.png');
            border-image-repeat: stretch; /* estica */

            border-image-slice: 15;


            border-image-source: url('../img/border.png');
            border-image-repeat: round; */ evita cortar */

            border-image-slice: 15;


            border-image-source: url('../img/border.png');
            border-image-repeat: space; */ajusta a imagem*/

            border-image-slice: 15;


            border-image-source: url('../img/border.png');
            border-image-repeat: round;

            border-image-slice: 15; 

            border-image-outset: 25px; /* distância da borda */


            /* Resumindo as propriedades de imagem na borda */ 

            border-image:
              url('../img/border.png') 

              15 / 10px / 15px /* slice / width / outset */
 
              round /* repeat */ 

            ;