La propiedad border-image me parecio grandiosa cuando la use por primera vez, antes debia cortar las imagenes manualmente y solia haber problemas cuando los bordes eran irregulares. Firefox 15 hizo algunos cambios a esta propiedad y uno de los sitios web en los que trabaje se dañó completamente debido a esto, me puse a investigar una solución y encontre que se hicieron algunos cambios en firefox.
Ya no se usa el prefijo -moz, es decir que -moz-border-image ya no funciona, ahora hay que escribir border-image. Otro cambio es que es indispensable darle un estilo solido al borde para que sea visible border-style:solid, y firefox ya no llena el interior del el objeto para que se eso hay que usar la palabra fill. Para mostrar los cambios que realize voy a mostrar el codigo de la hoja de estilos
Mi hoja de estilos se veia así:
#content{
width:921px;
padding-left:10px;
border-width:20px;
-webkit-border-image: url(site_images/big_border.png) 20 round;
-moz-border-image: url(site_images/big_border.png) 20 round;
float:left;
min-height:500px;
padding-top:5px;
}
Después de corregir los problemas se ve asi:
#content{
width:921px;
padding-left:10px;
border-width:20px;
-webkit-border-image: url(site_images/big_border.png) 20 round;
-moz-border-image: url(site_images/big_border.png) 20 round;
border-image: url(site_images/big_border.png) 20 fill round;
border-style:solid;
float:left;
min-height:500px;
padding-top:5px;
}
Esta una imagen que muestra el problema, a la izquierda se puede ver como estaba antes de la corrección y a la derecha se aprecia los bordes y el fondo corregidos