CSS border-image Property
Description
The border-image
property is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. Omitted values are set to their initial values.
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- See individual properties
- CSS Version
- CSS3
- JavaScript syntax
- object.style.borderImage
Syntax
border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat>
Values
- <border-image-source>See border-image-source CSS property for values.
- <border-image-slice>See border-image-slice CSS property for values.
- <border-image-width>See border-image-width CSS property for values.
- <border-image-outset>See border-image-outset CSS property for values.
- <border-image-repeat>See border-image-repeat CSS property for values.
Example
<div>Example of the border-image property</div>
div {
border: 1em solid blue;
border-image: url("images/border.png") 27 round stretch;
height: 70px;
padding: 20px;
margin: 20px;
}
Browser Support
Desktop | |||||
11 | 12 | 16 | 15 | 11 | 6 |
Tablets / Mobile | |||||
![]() |
|||||
4.4 | 18 | 15 | 11 | 6 | 1.0 |
Last updated by CSSPortal on: 12th October 2019