ExampleSpecify an image as the border around a div element:
Try it yourself » More examples at the bottom of this page. |
The border-image property is only supported in Opera.
Firefox supports an alternative, the -moz-border-image property.
Safari and Chrome support an alternative, the -webkit-border-image property.
The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.
Omitted values are set to their default values.
Tip: Use the border-image-* properties to construct 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" |
border-image: source slice width outset repeat; |
Value | Description |
---|---|
border-image-source | The path to the image to be used as a border |
border-image-slice | The inward offsets of the image-border |
border-image-width | The widths of the image-border |
border-image-outset | The amount by which the border image area extends beyond the border box |
border-image-repeat | Whether the image-border should be repeated, rounded or stretched |
![]() |
Try it Yourself - Examples |
Border-image button
This example demonstrates how to create a button with the border-image property.