Propiedad border-image

borde-image, es una nueva propiedad de CCS3 que nos permite determinar la calidad y variedad de los borde ofreciendo la alternativa de usar imágenes personalizadas.

La propiedad borde-image utiliza una imagen como patrón. De acuerdo con los valores provistos, la imagen es cortada para obtener los trozos necesarios y luego estos trozos son colocados alrededor del objeto para general el borde.

Necesitamos declarar tres atributos: el nombre del archivo conteniendo la imagen a usar y su ubicación, el tamaño de los trozos que queremos obtener del patrón, y unas palabras claves para específicar cómo estos trozos de la imagen serán distribuidos alrededor del elemento.
Para distribuir esos trozos tenemos los siguientes métodos.
stretch estira un único trozo para cubrir el lado completamente.
repeat repite los trozos de imagen tantas veces como sea necesario para cubrir el lado del elemento. En este caso el tamaño de la imagen es preservado y la imagen será cortada si no hay espacio suficiente.
round calcula qué largo es el lado del elemento y luego estirará los trozos para asegurarse de que todos son mostrados completos.
Podemos utilizar la propiedad border-with para especificar un valor diferente para cada lado del elemento.
Para probar esta propiedad use una imagen en formato PNG.

Método round

@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 30px solid;
border-image:url(../recursos/flores.png) 30 round;
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;

}

Método repeat

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 30px solid;

border-image:url(../recursos/flores.png) 30 repeat;

}

#titulo{

font: bold 36px NuevaLetras, verdana, sans-serif;

}

Método stretch

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 30px solid;

border-image:url(../recursos/flores.png) 30 stretch;

}

#titulo{

font: bold 36px NuevaLetras, verdana, sans-serif;

}