CSS | border-image-slice Property
In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property.
The border-slice property divides a given image into:
- 9 regions
- 4 corners
- 4 edges
- A middle region.
Note: The middle region remains transparent as default and fill value is used to make it opaque/translucent.
Below image illustrate the regions mentioned above:
- The regions 1, 3, 7, 9 are the corner regions.
- The regions 2, 4, 6, 8 are the edge regions.
- The region 5 is the middle region.
Syntax:
border-image-slice= value;
Default Value : Its default value is 100%.
Property values:
| Value | Effect/Functionality |
|---|---|
| Number | Represents an edge offset in pixels for raster images and coordinates for vector images.(See:vector vs raster graphics) |
| Percentage | Represents an edge offset as a percentage of the source image’s size: the width of the image for horizontal offsets, the height for vertical offsets. |
| Fill |
Causes the middle region to be displayed as a background image. |
| Initial |
Initialises the property to its default value. |
| Inherit |
Inherits the value of the property from it’s parent element. |
Below program illustrate the border-image-slice Property:
Example:
HTML
<!DOCTYPE html> <html> <head> <title> CSS | border-image-slice Property </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-source: url( border-image-repeat: round; border-image-slice: 30%; border-image-width: 20px; } .border3 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: fill; border-image-width: 20px; } .border4 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: initial; border-image-width: 20px; } .border5 { border: 10px solid transparent; padding: 15px; border-image-source: url( border-image-repeat: round; border-image-slice: inherit; border-image-width: 20px; } div { margin-top:20px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>border-image-slice property</h2> <div class = "border1">Border 1</div> <div class = "border2">Border 2</div> <div class = "border3">Border 3</div> <div class = "border4">Border 4</div> <div class = "border5">Border 5</div> </body></html> |
Output:
Supported Browser: The browser supported by border-image property are listed below:
- Google Chrome 15 and above
- Edge 12 and above
- Internet Explorer 11.0 and above
- Firefox 15.0 and above
- Opera 15.0 and above
- Safari 6.0 and above
Please Login to comment...