The border-image property in CSS is used to specify the border of an image. This property creates a border using an image instead of a normal border.
The property contains three-part that are listed below:
- The complete image is used as a border.
- A slice of the image is used as a border
- The middle section of the image is used (repeated or stretched) as a border
The border-image property is used to slice an image into nine sections, like a tic-tac-toe board.
Syntax:
element {
border-image: url(border.png);
}
border-image properties: There are many border-image properties which are listed below:
- border-image-source: This property is used to set the image path.
- border-image-width: This property is used to set the width of the border image.
- border-image-slice: This property is used to slice the border of the image.
- border-image-repeat: This property is used to set the border of the image as rounded, repeated, and stretched.
- border-image-outset: This property is used to specify the amount by which the border image area extends beyond the border box.
Example: This example shows the use of the border-image property.
Output:
👁 Image
Supported Browsers: The browsers supported by the border-image property are listed below:
- Google Chrome 16.0 and above
- Edge 12.0 and above
- Firefox 15.0 and above
- Opera 11.0 and above
- Safari 6.0 and above
