The tiled-box decorator can render nine sprites or images across an element. One image is placed at a fixed size in each of the element’s corners, one image is stretched along each edge, and a final image is stretched in both directions to cover the center region of the image.

The decorator renders across the padded area of its element.

decorator: tiled-horizontal( 
	<top-left-image-src> <top-left-image-orientation>,
	<top-image-src> <top-image-orientation>,
	<top-right-image-src> <top-right-image-orientation>,
	
	<left-image-src> <left-image-orientation>,
	<center-image-src> <center-image-orientation>,
	<right-image-src> <right-image-orientation>,
	
	<bottom-left-image-src> <bottom-left-image-orientation>,
	<bottom-image-src> <bottom-image-orientation>,
	<bottom-right-image-src> <bottom-right-image-orientation>
);

The <x-orientation> properties can be omitted, which leaves them at their default values.

Properties

*x*-image-src

Value: <string>
Initial: empty
Percentages: N/A

This property defines either a sprite name or a relative path to an image file.

*x*-image-orientation

Value: none | flip-horizontal | flip-vertical | rotate-180
Initial: none
Percentages: N/A

Flips or rotates the image.