Using the border-image property in CSS, you can use a single image to generate a border for a box object.
Out of the five properties specified by the W3C for border-image, Dreamweaver supports the following three:
- Image Source : Location of the image.
- Image slice: Treating the image as sliced into 9 sections.
- Repeat-x and Repeat-y:
- Repeat – Repeats/tiles the image across the edge
- Stretch – Stretches the image across the edge
- Round – Tiles the image so that only a whole number of images fit. If a whole number cannot be accommodated, the image is stretched
The border-image property has the following format (webkit – supported by Dreamweaver Live View):
-webkit-border-image: url[border image-source] [border image –slice] [border image-repeat]
Example: -webkit-border-image: url(border-image.png) 50 50 50 50 repeat round;
Note that the pixels are specified without px being suffixed. For percentage, you must add the suffix “%” to the values.
The border-image property has the following format (Mozilla support):
-moz-border-image: url[border image-source] [border image –slice] [border image-repeat]
Example: -moz-border-image: url(border-image.png) 50 50 50 50 repeat round;
- In the CSS Styles panel, click Add Property.
- Select border-image from the menu.
- Click the “+” icon.
- Specify the source of the image.
- Specify the image slice values.
- Specify how the image has to be added to the edges using the Repeat-x and Repeat-y values.