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.
The below image illustrate the regions mentioned above:
- The regions 1, 3, 7, and 9 are the corner regions.
- The regions 2, 4, 6, and 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: This causes
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, and the height for vertical offsets. |
Fill | Causes the middle region to be displayed as a background image. |
Initial | Initializes the property to its default value. |
Inherit | Inherits the value of the property from its parent element. |
The below program illustrates 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( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } .border2 { 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: 30%; border-image-width: 20px; } .border3 { 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: fill; border-image-width: 20px; } .border4 { 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: initial; border-image-width: 20px; } .border5 { 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: inherit; border-image-width: 20px; } div { margin-top: 20px; } </ style > </ head > < body > < h1 >w3wiki</ 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 the border-image property are listed below:
- Google Chrome 15 and above
- Edge 12 and above
- Firefox 15.0 and above
- Opera 15.0 and above
- Safari 6.0 and above