CSS border-image-slice Property

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:

CSS border-image Property

Enjoy coding!

Read more:

CSS Gradient Border

CSS Glowing Gradient Border