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:
- Complete image is used as border.
- Slice of image is used as border
- Middle section of image is used (repeated or stretched) as 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 property 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 boarder 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:
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( 30 stretch; } .border3 { border: 10px solid transparent; padding: 15px; border-image: url( 20% round; } 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 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...