The border image style properties allow page authors to use images instead of the border styles. Refer to the topic entitled Border images for more information.
| Control | Description | Options | Property |
|---|---|---|---|
| Sides, Middle Part | Specify how a border image should be scaled and tiled. The Sides control specifies how the image for the sides of the border should be scaled and tiled. The Middle Part control specifies how the image for the middle part of the border should be scaled and tiled. When the second value is not specified, then it is assumed to be the same as the first value. | repeat, round, stretch | theme_border_image_prop.html#mcs-border-image-repeat |
| Source | Specifies an image, image policy or the mcs-gradient() function to use in place of the border styles given by the border style properties. | none, URI, <image_policy>, mcs-gradient() | theme_border_image_prop.html#mcs-border-image-source |
| Slice All | Specifies inward offsets from the edges of a border image. The property can have from one to four values. If four values are given, then they apply to each edge in that order. If only one value is given, then it applies to all four edges. | <number>, <percentage> | theme_border_image_prop.html#mcs-border-image-slice |
| Slice Top, Slice Right, Slice Bottom, Slice Left | Specify inward offsets from the edges of a border image. | <number>, <percentage> | theme_border_image_prop.html#mcs-border-image-slice-all |
Specifies how a border image should be scaled and tiled. The property takes two arguments. The first value of the property specifies how the image for the sides of the border should be scaled and tiled; the second value of the property specifies how the image for the middle part of the border should be scaled and tiled. When the second value is not specified, then it is assumed to be the same as the first value.
| Option | Description |
|---|---|
| repeat | Indicates that the image should be repeated to fill the available area. |
| round | Indicates that the image should be repeated to fill the area, and if the image does not fill the area with a whole number of tiles, then it will be rescaled first |
| stretch | Indicates that the image should be scaled to fit the box. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies inward offsets from the edges of a border image. The property can have from one to four values. If only one value is given, then it applies to all four edges. The default value is '100%'.
| Option | Description |
|---|---|
| <number> | Numbers representing pixels in the image. |
| <percentage> | Percentages relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. |
| inherit | The value of the property should be inherited from the parent element. |
Specify inward offsets from the edges of a border image. The default value is '100%'.
| Option | Description |
|---|---|
| <number> | Numbers representing pixels in the image. |
| <percentage> | Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for the vertical offsets. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies an image to use in place of the border styles given by the border style properties, and as an additional background layer for the element. The default value is 'none'.
| Option | Description |
|---|---|
| none | No image will be displayed. |
| url('URI') | The URI of the image to display. |
| mcs-component-url('URI') | The URI of the image policy to use. |
| mcs-transcodable-url('URI') | The URI of the image to display. The image will be transcoded, if necessary. |
| mcs-gradient() | The gradient function to render. |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
<head>
<title>border-image examples</title>
<style type="text/css">
.border-example-shorthand {
width: 150px;
mcs-border-image: url('/mcs/projects/examples/assets/images
/border-example-two-image.gif') 27;
border: 10px solid black;
}
.border-example-policies {
width: 150px;
height: 100px;
mcs-border-image-source: url('/mcs/projects/examples/assets/
images/border-example-two-image.gif');
mcs-border-image-slice: 21 25 21 25;
mcs-border-image-repeat: round stretch;
border: 10px solid black;
}
.code {
font: 12px courier;
}
</style>
</head>
<body>
<div>
<h2>Examples of CSS3 border-image usage</h2>
<h4>CSS3 border-image shorthand</h4>
<div class="border-example-shorthand" style="color:black;">
Border image example</div>
<div class="code">border-example-shorthand { <div>mcs-border-image:
url('/mcs/projects/examples/assets/
images/border-example-two-image.gif') 27;</div>
<div>}</div>
</div>
<h4>CSS3 border-image policies</h4>
<div class="border-example-policies" style="color:black;padding:5px">
Border image example 2</div>
<div class="code">border-example-policies { <div>mcs-border-image-source:
url('/mcs/projects/examples/assets/images/
border-example-two-image.gif');</div>
<div>mcs-border-image-slice: 21 25 21 25;</div>
<div>mcs-border-image-repeat: round stretch;</div>
<div>}</div>
</div>
</div>
</body>
</html>