-moz-border-image property | -webkit-border-image property
Specifies an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.
This property works for all elements, except table cell elements if the border-collapse property of the container table is set to collapse.
Note: The -moz-border-image property is supported in Firefox from version 3.5.
|One of the following values:|
Description of values:
|Separate the cutter edge values from the border-width values.|
|Where URI specifies the location of the image file.|
|The width of the border in length units. For the supported length units, see the length page.|
|Takes the value of this property from the computed style of the parent element.|
|Default. No border image is used.|
|Images are repeated to fit the size of the box.|
|Repeat and stretch, partial images are not allowed.|
|Specifies a part of the actual image (fit to the element) in pixels to use for the border.|
|Specifies a part of the image in length units to use for the border. For the supported length units, see the length page.|
|The size is the specified percentage of the size of the image.|
|Images are stretched to fit the size of the box.|
|Greater than the medium width.|
|Less than the medium width.|
The image specified by the URI is cut into 9 pieces by 4 cutter edges (2 horizontal, 2 vertical).
The size values determine the position of the cutter edges from the top, right, bottom and left side of the image.
The border-width values decide the width of the element's border. The border separator lines (lines between the contents of the element and the borders) cut the element into 9 pieces. The 9 pieces of the image will be fit into the 9 pieces of the element.You can specify the behavior of the fitting by the repeat style parameters. If only one repeat style value is specified, it affects the horizontal and vertical directions, too. If no repeat style value is defined, the default is 'stretch stretch'.
Example HTML code 1:
This example illustrates the use of the -moz-border-image and -webkit-border-image properties:
Did you find this example helpful?
Supported by tags:
User Contributed Comments