Chris' article on the border-image property (http://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?
"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:
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?
Chris' article on the border-image property (http://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
Oops, I meant Firefox 15.01.
Cheers, Crispin
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:
-webkit-border-image: url(my-border.png) 30 30 30 30 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!
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!