How does CSS 3 border-image work exactly?
Question
I have an image of 4x4 in size and I want to use it all around a DIV's border. The following:
-moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat
will place left and right borders, but not bottom and top. What's wrong with it? I think I have misunderstood the syntax and if that is so, how does this syntax really work?
Solution
If you want the 4x4 image to be tiled along the border, you'll need to create a new image, 12x12 that looks like a square box with the border already tiled. Similar to this, where each diamond would be your 4x4 image:
(source: www.w3.org)
Then you'd just use this CSS:
border-image: url("border.png") 4 repeat;
The examples in the official spec may make it a little clearer.
OTHER TIPS
did you try
-moz-border-image: url("../images/window/side.png") 4 / 4px repeat;
or
-moz-border-image: url("../images/window/side.png") 4 repeat;
with border-width:4px;
?