The CSS border-image-slice property defines how to slice the image defined by the CSS border-image-source (the image is sliced into nine sections: four corners, four edges and the middle).
Demo:
Click the “Try it” button to change the value of the border-image-slice property to 30%:
Hello World!
Syntax:
border-image-slice: number|%|fill;number – the number(s) represent pixels for raster images or coordinates for vector images.
% – percentages are relative to the height or width of the image.
fill – causes the middle part of the image to be displayed.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg-1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) round;
border-image-slice: 10%;
}
#borderimg-2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) round;
border-image-slice: 20%;
}
#borderimg-3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) round;
border-image-slice: 30%;
}
</style>
</head>
<body>
<p id="borderimg-1">border-image-slice: 10%;</p>
<p id="borderimg-2">border-image-slice: 20%;</p>
<p id="borderimg-3">border-image-slice: 30%;</p>
</body>
</html>Output:
border-image-slice: 10%;
border-image-slice: 20%;
border-image-slice: 30%;
The original image:
Enjoy coding!
Read more: