border-image-source

The image to use for the border.

<image> (required)

The image value is a <uri> , e.g. url(http://example.org/image.png)

border-image-slice

border-image-width

<number> | <percentage> (required)

One, two, three or four values represent inward offsets from the top, right, bottom and left edges of the image (respectively), dividing it into nine regions: four corners, four edges, and a middle.

One value belongs to all four sides of the image.
Two values belong 1. to the top and bottom and 2. to the right and left sides.
Three values belong 1. to the top, 2. to the right and left sides, and 3. to the bottom.
Four values belong to the top, right, bottom, and left sides, in that order.

Percentages are relative to the width/height of the image.
Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is an SVG image).

Negative values are not allowed.
Values greater than the size of the image are interpreted as 100%.

fill (optional)

If the "fill" keyword is present, the middle part of the border-image is preserved, and drawn as the background-image of the image. In Gecko 1.9.1 (Firefox 3.5) this is the default behaviour; in Gecko 12, the default behaviour is to discard this area.

<number> | <percentage> | auto (required)

The border image is drawn inside an area (the border image area) the boundaries of which correspond by default to the border box (which may be changed by border-image-outset). The four values specify the inward distances from the top, right, bottom and left edges of the image (respectively).

One value belongs to all four sides of the area.
Two values belong 1. to the top and bottom and 2. to the right and left sides.
Three values belong 1. to the top, 2. to the right and left sides, and 3. to the bottom.
Four values belong to the top, right, bottom, and left sides, in that order.

Percentages refer to the width and height of the border image area (as appropriate).
Numbers represent multiples of the corresponding computed border-width.
auto means that the intrinsic width/height (as applicable) of the corresponding image slice (border-image-slice) is used. If this is not available, then the border-width values are used.

Negative values are not allowed.

border-image-outset

<length> | <number> (required)

The border-image-outset values specify the amount by which the border-image-area extends beyond the border box. Its four values specify the outsets for the top, right, bottom and left edges of the box.

One value belongs to all four sides of the box.
Two values belong 1. to the top and bottom and 2. to the right and left sides.
Three values belong 1. to the top, 2. to the right and left sides, and 3. to the bottom.
Four values belong to the top, right, bottom, and left sides, in that order.

Numbers represent multiples of the corresponding computed border-width.

Negative values are not allowed.

border-image-repeat

<stretch> | <repeat> | <round> | <space> (required)

Specifies how the images for the sides and the middle part of the border-image are scaled and tiled.

One value belongs to both the horizontal and vertical sides.
Two values belong to 1. the horizontal sides, and 2. the vertical sides.

stretch specifies that the image should be stretched to fill the area.
repeat indicates that the image should be tiled (repeated) to fill the area.
round means that the image is tiled to fill the area; if a whole number of tiles cannot be used to fill the area, the image is rescaled such that a whole number of tiles may be used.
space specifies that the image should be tiled to fill the area; if a whole number of tiles cannot be used to fill the area, the extra space is distributed around the tiles.