CSS3 border-imageProperty
Example
Specifies the image to be used as the border around a div element:
#borderimg {
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
Try it Yourself »
More examples at the bottom of this page.
Browser Support
The numbers in the table specify the first browser version that supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first browser version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Property definition and usage instructions
The border-image property is a shorthand property used to setborder-image-source, border-image-slice, border-image-width, border-image-outsetandborder-image-repeatthe value of.
Omitted values are set to their default values.
Tip:Use the border-image-* properties to build beautiful scalable buttons!
| Default Value: | none 100% 1 0 stretch |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.borderImage="url(border.png) 30 30 round" |
Syntax
border-image: source slice width outset repeat|initial|inherit;
| Value | Description |
|---|---|
| border-image-source | Used to specify the path of the image to be used for drawing the border. |
| border-image-slice | The image border is offset inward. |
| border-image-width | Image border width |
| border-image-outset | Used to specify the amount of the border-image area to be drawn outside the border. |
| border-image-repeat | Used to set whether the image border should be repeated (repeat), stretched (stretch), or rounded (round). |
More Examples
Image Button
This example demonstrates how to create a button with the border-image property.
Related Articles
CSS3 Tutorial:CSS3 Border
other extensions