border-image

Hay propiedades que no todos los navegadores soportan, la propiedad border-image es una de ellas, Safari y Firefox no presentan problema alguno y podemos utilizar border-corner-image para añadir una imagen como borde.Las propiedades de border-image serían

border-top-image

border-right-image

border-bottom-image

border-left-image

y de border-corner-image:

border-top-left-image

border-top-right-image

border-bottom-left-image

border-bottom-right-image

Si añadimos en nuestra hoja de estilos:

#border-image {

margin:0 30px;

padding:14px;

width:270px;
border:1em double orange;

-webkit-border-image: url(url-imagen.png) 27 27 27 27 round round;

-moz-border-image: url(url-imagen.png) 27 27 27 27 round round;

}

El ancho lo establecemos con width.
Añadimos -webkit-border-image para visualizarlo en Safari y Chrome y -moz-border-image para Firefox.

Los cuatro valores que añadimos establecen el tamaño de cada esquina en el mismo orden que hacemos con margin y padding arriba, derecha, abajo, izquierda.

Con round establecemos la forma en que se van a escalar los bordes " round" o "stretch".

¿Por qué repetimos el valor? porque si lo añadimos sólo una vez equivale al mismo valor para los cuatro lados. Donde url imagen añadiríamos la url de la imagen, para el ejemplo la imagen es la siguiente:

Y en una entrada o gadget de html

<p id="border-image">Escribimos un texto cualquiera</p>

Obtendríamos el siguiente borde con "round round" (redondear)

Escribimos un texto cualquiera

Con los mismos estilos pero cambiando por "stretch stretch" (estirar)

Escribimos un texto cualquiera

En  navegadores que no soportan esta propiedad lo verán de la siguiente forma porque añadimos la propiedad border,  border:1em double orange;

REFERENCIA:CSS3.info