May 05, 2021 CSS Reference Manual
Set the picture as a border that surrounds the div element:
div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }
There are more instances at the bottom of the page.
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- |
Internet Explorer 11, Firefox, Opera 15, Chrome, and Safari 6 support border-image properties.
Safari 5 supports the alternative -webkit-border-image property.
The border-image property is a short-case property that sets the following properties:
If the value is omitted, its default value is set.
Tip: Use the border-image-?property to construct beautiful scalable buttons!
Default: | none 100% 1 0 stretch |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.borderImage="url(border.png) 30 30 round" |
Value | Describe | Test |
---|---|---|
border-image-source | The path to the picture used in the border. | |
border-image-slice | The picture border is offset inwards. | |
border-image-width | The width of the picture border. | |
border-image-outset | The border image area exceeds the amount of the border. | |
border-image-repeat | Whether the image border should be tiled, paved, or stretched. | Test |
CSS3 tutorial: CSS3 border