In this article, we will see how to add a border image as a slice image using CSS. To make the border slice image, the border-image-slice property is used. This property divides or slices an image specified by the border-image-source property.
The border-image-slice property divides a given image into –
- 9 regions
- 4 corners
- 4 edges
- A middle region
The below image illustrates 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= Number | Percent | fill | Initial | Inherit;
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> < html >
< head >
< title >
How to slice the image specified by
border-image-source in CSS?
</ 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;
}
div {
margin-top: 20px;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >
How to slice the image specified
by border-image-source in CSS?
</ h2 >
< div class = "border1" >Border 1</ div >
< div class = "border2" >Border 2</ div >
< div class = "border3" >Border 3</ div >
</ body >
</ html >
|
Output: