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:
<!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 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