CSS border-image-source Property
The border-image-source property is used to specify the image source which is to be set as the border of an element.
Syntax:
border-image-source: url(image-path.png)| none| initial| inherit;
Note: If the value is none, the border styles will be used. The specified image can be divided into regions with the help of border-image-slice property.
Default Value: Its default value is none.
Values:
- none: No image is specified.
- image: Used to specify the path of the image to be used as the border of an element.
- initial: Initializes the property with it’s default value.
- inherit: It takes the value from the parent element.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > CSS | border-image-source Property </ title > < style > body { text-align: center; color: green; } .border1 { border: 10px solid transparent; padding: 15px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: round; border-image-slice: 50; border-image-width: 20px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >border-image-source property</ h2 > < div class = "border1" >w3wiki</ div > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by CSS | border-image-source Property are listed below:
- Chrome 15.0
- Edge 12.0
- Firefox 15.0
- Internet Explorer 11.0
- Opera 15.0
- Safari 6.0