Categories
Web development

CSS border-image-slice Property

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