In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBorderImage

MozBorderImage style property | webkitBorderImage style property

Browser support:

MozBorderImage

	3.5

webkitBorderImage

Specifies or retrieves 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 borderCollapse property of the container table is set to collapse.

Note: The MozBorderImage property is supported in Firefox from version 3.5.

Syntax:

object.MozBorderImage;
object.webkitBorderImage;

You can find the related objects in the Supported by objects section below.

MozBorderImage:	This property is read/write.
webkitBorderImage:	This property is read/write.

CSS page for this property: -moz-border-image

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

url(URI)

This value can be used from 1 to 4 times (use the space character to separate them)

•

cutter edge

One of the following values:

•	size (non-negative floating-point)
•	<size in non-negative length>
•	size in non-negative percentage

Values in this order (use the space character to separate them):

This value can be used from 1 to 4 times (use the space character to separate them)

•

border-width

One of the following values:

•	<border width in non-negative length>
•	medium
•	thin
•	thick

possible but not necessary; left to personal choice

This value can be used from 1 to 2 times (use the space character to separate them)

•

repeat style

One of the following values:

•	stretch
•	repeat
•	round

•

none

•

inherit

Description of values:

Separate the cutter edge values from the border-width values.

url(URI)

Where URI specifies the location of the image file.

border width in non-negative length

The width of the border in length units. For the supported length units, see the length page.

inherit

Takes the value of this property from the computed style of the parent element.

medium

Default.

none

Default. No border image is used.

repeat

Images are repeated to fit the size of the box.

round

Repeat and stretch, partial images are not allowed.

size (non-negative floating-point)

Specifies a part of the actual image (fit to the element) in pixels to use for the border.

size in non-negative length

Specifies a part of the image in length units to use for the border. For the supported length units, see the length page.

size in non-negative percentage

The size is the specified percentage of the size of the image.

stretch

Images are stretched to fit the size of the box.

thick

Greater than the medium width.

thin

Less than the medium width.

Default: none.

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.

If only one size value is set, it is used for all four sides.
If two size values are specified, the first value is used for the top and bottom sides, the second one is for the left and right sides.
If three size values are set, the first value is used for the top side, the second one is for the left and right sides and the third one is for the bottom side.
If four size values are specified, the order is top, right, bottom, left (clockwise from top).

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:

<head>
    <style>
        #myDiv {
            padding: 32px;
            border-width: 27px;
            -moz-border-image: url("border.png") 27 27 27 27 round round;
            -webkit-border-image: url("border.png") 27 27 27 27 round round;
        }
    </style>
</head>
<body>
    <br /><br /><br />
    <span id="myDiv">
        border-image-test
    </span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBorderImage and WebkitBorderImage properties in JavaScript:

<head>
    <style>
        #myDiv {
            padding: 32px;
            border-width: 27px;
            -moz-border-image: url("border.png") 27 27 27 27 round round;
            -webkit-border-image: url("border.png") 27 27 27 27 round round;

        }
    </style>
    <script type="text/javascript">
        function ChangeRepeatStyle () {
            var div = document.getElementById ("myDiv");

            if ('MozBorderImage' in div.style) {
                div.style.MozBorderImage = "url('border.png') 27 27 27 27 stretch stretch";
            } else if ('webkitBorderImage' in div.style) {
                div.style.webkitBorderImage = "url('border.png') 27 27 27 27 stretch stretch";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <br /><br /><br />
    <span id="myDiv">
        border-image-test
    </span>
    <br /><br /><br /><br /><br />
    <button onclick="ChangeRepeatStyle ()">
        Change the repeat style of the border image
    </button>
</body>