How does a CSS image work with CSS 3?

Question

I have a 4x4 image and I want to use it around the div border. Following:

-moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat 

the left and right borders will be located, but not the lower and upper. What is wrong with it? I think I misunderstood the syntax, and if so, how does this syntax really work?

Answer 1

If you want the 4x4 image to be tiled along the border, you need to create a new 12x12 image that looks like a square box with the border already tiled. Similarly, where each diamond will be your 4x4 image:

_{(source: www.w3.org )}

Then you just use this CSS:

 border-image: url("border.png") 4 repeat; 

The examples in the official specification may make this a little clearer.

Answer 2

You tried -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;