Firefox 15 messes up border-image background fills

[cspin]

Chris’ article on the border-image property (https://css-tricks.com/understanding-border-image/) is awesome, especially the bit about how to “fill” the background. Worked great for me, until Firefox 15.1 came out. Unfortunately FF 15.1 has just broken this nifty trick, and made a couple things stop working actually…

First, you must now declare “border-style:solid;” below the border-image property or you won’t see the border image at all. Nice.

Much worse, however, is that it fails to properly implement the “border-image-slice:fill;” declaration correctly. Instead of filling in the background, it just puts the background in the four corner slices. Garrrgh!!

Has anyone else encountered this and figured out a workaround?

Cheers,
Crispin

[cspin]

Oops, I meant Firefox *15.01*.

Cheers,
Crispin

[cspin]

Ok, found the fix. Credit goes to David Baron (http://dbaron.org/log/20120612-border-image):

“When there are non-transparent pixels in the center slice of the image, authors should use the fill keyword *only* in the unprefixed declaration, like this:

-moz-border-image: url(my-border.png) 30 30 30 30 stretch stretch;

-webkit-border-image: url(my-border.png) 30 30 30 30 stretch stretch;

-o-border-image: url(my-border.png) 30 30 30 30 stretch stretch;

border-image: url(my-border.png) 30 30 30 30 *fill* stretch stretch; “

Note, you still need to add “border-style:solid;” *after* border-image for your border image to appear at all in FF15. ;)

Hope this helps others!

[richmedia]

Thanks for the firefox fix!

Do you know how to fix it in ie7 as well? It is having a similar problem of not showing up and the border solid results in a thick border instead. Anyone else encounter this issue?

Thanks!

[Author]

Posts