border-image-source
Summary
The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead.
Overview table
- Initial value
none- Applies to
- all elements, except table elements where
border-collapse: collapseis applied - Inherited
- No
- Media
- visual
- Computed value
- ‘none’ or the image with its URI made absolute
- Animatable
- No
- CSS Object Model Property
borderImageSource- Percentages
- N/A
Syntax
border-image-source: noneborder-image-source: url(path/to/image.png)
Values
- none
- Default.
border-styleis used instead. - url(path/to/image.png)
- This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at "CSS images: url()".
Examples
A simple example showing a <div> that has border-image-source property and other border-image properties.
<div class="pattern">border-image</div>
/* General setup of the containers */
div {
height: 100px;
width: 100px;
margin: 25px;
text-align: center;
line-height: 100px;
font-family: sans-serif;
}
/* This general class will apply the pattern to the containers */
.pattern {
border-image-source: url(/docs/w/images/d/d8/border-image.png);
border-image-slice: 30;
border-image-width: 6;
border-image-outset: 3;
}
Related specifications
- CSS Level 3 - Backgrounds and Borders Module
- W3C Candidate Recommendation
See also
Related articles
Border
border-image-source