CSSborder-image Property
Example
Specify an image as the border around an element:
border-image: url(border.png) 30 round;
}
More "Try it Yourself" examples below.
Definition and Usage
Theborder-image property allows you to specify an image to be used as the border around an element.
The border-image property is a shorthand property for:
Omitted values are set to their default values.
| Default value: | none 100% 1 0 stretch |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.borderImage="url(border.png) 30 round"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border-image | 16 | 11 | 15 | 6 | 15 |
Note: See individual browser support for each value below.
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| border-image-source | The path to the image to be used as a border | Demo ❯ |
| border-image-slice | How to slice the border image | Demo ❯ |
| border-image-width | The width of the border image | Demo ❯ |
| border-image-outset | The amount by which the border image area extends beyond the border box | Demo ❯ |
| border-image-repeat | Whether the border image should be repeated, rounded or stretched | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Different slice values completely changes the look of the border:
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Related Pages
CSS tutorial:CSS Border Images
CSS Reference:border-image-outset property
CSS Reference:border-image-repeat property
CSS Reference:border-image-slice property
CSS Reference:border-image-source property
CSS Reference:border-image-width property
HTML DOM reference:borderImage property
