Agregar imagen como borde con border-image CSS3

En esta ocasión vamos a ver como agregar una imagen como borde a un div, para ello CSS3 tiene una propiedad llamada border-image.

border-image:

border-image-source -> src de la imagen.

border-image-slice -> desplazamiento interno de la imagen.

border-image-width -> Especifica la anchura de border-image default auto.

border-image-outset ->  La cantidad de imágenes borde que soporta, es limitado.

border-image-repeat ->   stretch | round | repeat

 Esta propiedad es compatible en  IE9+, Firefox 4+, Chrome, Safari 5+ y Opera.

 border-image  -> Para todos los navegadores compatibles.

-moz-border-image -> Para versiones más antiguas de Firefox.

-webkit-border-image -> Para versiones de crhome y safari

-o-border-image -> Para versiones de Opera

Modo de uso ...

border-image: source slice width outset repeat;

Ejemplo: border-image: url(imagen.jpg) 40% 40% 120 120 round;

border image:
slide image:	Ejemplo: 40% 40%
outset image:	Ejemplo: 122 122
repeat image:	round stretch repeat