Background color with transparent border-image

0
votes

I try to build a nice box with only 1 image and 1 div. Here is my code:

border-width: 14px;
-moz-border-image:url(box.png) 14 round;
-webkit-border-image:url(box.png) 14 round;
-o-border-image:url(box.png) 14 round;
border-image:url(box.png) 14 round;

And an example:

http://jsfiddle.net/ZHKbn/

In Safari & Firefox, the background of the box is white, but in Chrome, its transparent.

Which browser is correct? I need the white background version, is there a fix to get this working in Chrome?

Thanks

1
google-chromebackgroundpngbordercss

1 Answers

1
votes

Will this suffice?

I added an inner div with the background color. seems to work in chrome and firefox now.

http://jsfiddle.net/ZHKbn/2/

This works in chrome, but does not work in firefox:

http://jsfiddle.net/ZHKbn/7/

Ok, final one. Works in chrome and firefox:

http://jsfiddle.net/ZHKbn/8/

border-width: 14px;
-moz-border-image:url(http://cl.ly/041l44390l002l2j1307/box.png) 14 round;
-webkit-border-image:url(http://cl.ly/041l44390l002l2j1307/box.png) 14 fill round;
-o-border-image:url(http://cl.ly/041l44390l002l2j1307/box.png) 14 round;
border-image:url(http://cl.ly/041l44390l002l2j1307/box.png) 14 fill round;

​