Mi Blog

Programador Web, fanático del software libre, hardware libre y energía renovable. Quito Ecuador

Arreglar problema de border-image en Firefox 15

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;
}
Corrección border-image Firefox

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

Categorias: CSS3 Firefox