CSS property: `-webkit-border-image`

Description

Specifies an image as the border for a box.

The specified image is cut into nine pieces according to the length values given. This property applies to any box, including inline elements, but does not apply to table cells if the border-collapse property is set to collapse.

The first five fields are required. The <uri> field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.

After the required fields, you can optionally include a slash (/) followed by a border width field or fields. You can specify all four border widths individually or specify a single value that applies to all four fields. If these values are not the same size as the inset values, the slices of the original image are scaled to fit.

Finally, you can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch, or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

Syntax

-webkit-border-image: <uri> <top> <right> <bottom> <left> <x_repeat> <y_repeat>;

-webkit-border-image: <uri> <top> <right> <bottom> <left> / <border> <x_repeat> <y_repeat>;

-webkit-border-image: <uri> <top> <right> <bottom> <left> / <top_border> <right_border> <bottom_border> <left_border> <x_repeat> <y_repeat>;

-webkit-border-image: <function> <top> <right> <bottom> <left> / <top_border> <right_border> <bottom_border> <left_border> <x_repeat> <y_repeat>;

Values

<uri>

The file path of the image.

<top>

The distance from the top edge of the image.

<right>

The distance from the right edge of the image.

<bottom>

The distance from the bottom edge of the image.

<left>

The distance from the left edge of the image.

<x_repeat>

The horizontal repeat style.

repeat (by default)	The image is tiled.
round	The image is stretched before it is tiled to prevent partial tiles.
stretch	The image is stretched to the size of the border.

<y_repeat>

The vertical repeat style.

repeat (by default)	The image is tiled.
round	The image is stretched before it is tiled to prevent partial tiles.
stretch	The image is stretched to the size of the border.

<border>

The width of the border on all sides.

<top_border>

The width of the top border.

<right_border>

The width of the right border.

<bottom_border>

The width of the bottom border.

<left_border>

The width of the left border.

<function>

A function that procedurally generates an image, such as gradient.

Versions

Examples

h1 {
    -webkit-border-image: url("border.png") 25;
    border: solid 25px #f00;
}