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): 
1. url(URI)
2.
 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
3.
 Values in this order (use the space character to separate them): 
1. /
2.
 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
4.
 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
possible but not necessary; left to personal choice
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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content