How does CSS 3 border-image work exactly?

Question

Hi,

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?

Answer 1

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;
?

Answer 2

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:

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.