CODEWITHSUNDEEP
htmlcss
Tower
Tower

Reputation: 102785

How does CSS 3 border-image work exactly?

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?

Upvotes: 4

Views: 664

Answers (2)

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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:

alt text
(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.

Upvotes: 3

Knu
Knu

Reputation: 15136

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

Upvotes: 0

Related Questions