CODEWITHSUNDEEP
htmlcss
coure2011
coure2011

Reputation: 42504

css3 border image

I have four separate images each of 20px by 20px, I want to show each image on each border-side. any code snippet? My target platforms are FF 3.6+ and Safari 5+.

Using css3 and html5.

Upvotes: 0

Views: 2549

Answers (2)

Mads Ohm Larsen
Mads Ohm Larsen

Reputation: 3745

It does not seem possible to use more than one image for the border-image attribute.

However, you can still use border-image, you'll just need to create an image with all four sides in one.

Look at the example here: http://www.w3.org/TR/css3-background/#border-images

border-image takes the url for the image, and then four sizes, how much it should slice of the image to use. The first value is used for the upper lefthand corner, the second for the upper righthand side, and so on. Using 

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

will chop of the upper left 20x20 pixels for the upper left of the div, det upper right 20x20 for the upper right of the div and so on.

Upvotes: 1

foxy
foxy

Reputation: 7672

You can use:

/* Shorthand */
border-image:url('top.png') url('right.png') url('bottom.png') url('left.png');

Or the long way:

/* Long way */
border-top-image:url('...');
border-right-image:url('...');
border-bottom-image:url('...');
border-left-image:url('...');

Upvotes: 1

Related Questions