CSS Border Images
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.
HTML
<!DOCTYPE html><html><head> <title> CSS | Border Images </title> <style> body { text-align: center; } h1 { color: green; } .border1 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } .border2 { border: 10px solid transparent; padding: 15px; border-image: url( } .border3 { border: 10px solid transparent; padding: 15px; border-image: url( } div { margin-top: 20px; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>border-image property</h2> <div class="border1">Border 1</div> <div class="border2">Border 2</div> <div class="border3">Border 3</div></body></html> |
Output:
Supported Browsers: The browsers supported by the border-image property are listed below:
- Google Chrome 16.0 and above
- Edge 12.0 and above
- Internet Explorer 11.0 and above
- Firefox 15.0 and above
- Opera 11.0 and above
- Safari 6.0 and above
Please Login to comment...