CSS border-image-slice

The CSS border-image-slice property is used to specify the way to slice the image, used for the border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 15px solid transparent; padding: 12px;
         border-image-source: url(images/border-image-demo.png);
         border-image-repeat: repeat;}
      p#one {border-image-slice: 1;}
      p#two {border-image-slice: 15;}
      p#three {border-image-slice: 50;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is para two.</p>
   <p id="three">This is the last para.</p>
   
</body>
</html>

Output

This is a para.

This is para two.

This is the last para.

In above program, the image used is:

CSS border-image-slice Syntax

The syntax of border-image-slice property in CSS, is:

border-image-slice: x;

The value of x should be any of the following:

number - used to define the slice in pixels of the image
% - used to define the slice relative to the width and height of the image
initial - used to set the default value
inherit - used to inherit and set the value from its parent

Note - The fill keyword followed by the x, can be used to fill the image to the middle of the element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 15px solid transparent; padding: 12px; color: white;
         border-image-source: url(images/border-image-demo.png);}
      p#one {border-image-repeat: round; border-image-slice: 10 fill;}
      p#two {border-image-repeat: repeat; border-image-slice: 10 fill;}
      p#three {border-image-repeat: stretch; border-image-slice: 10 fill;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is para number two.</p>
   <p id="three">This is the third para.</p>
   
</body>
</html>

Output

This is a para.

This is para number two.

This is the third para.

CSS border-image-slice with Multiple Values

We can also define border-image-slice using multiple values.

If four values given, then first value refers to top, second value refers to right, third value refers to bottom, and the fourth value refers to the left border
If three values given, then first value refers to top, second value refers to right and left, and the last value refers to the bottom border
If two values given, then first value refers to top and bottom, whereas the second value refers to the right and left border

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 18px solid transparent; padding: 30px 10px;
         border-image-source: url(images/border-image-demo.png);}
      p#one {border-image-repeat: repeat; border-image-slice: 1 50 10 30;}
      p#two {border-image-repeat: repeat; border-image-slice: 1 50 10;}
      p#three {border-image-repeat: repeat; border-image-slice: 1 50;}
      p#four {border-image-repeat: repeat; border-image-slice: 1;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is para number two.</p>
   <p id="three">This is the third para.</p>
   <p id="four">This is the last or fourth para.</p>
   
</body>
</html>

Output

This is a para.

This is para number two.

This is the third para.

This is the last or fourth para.

Note - The image used for the border gets sliced into nine sections. All nine sections are divided into four edges, four corners and the middle. The fill keyword is used to fill the middle with the same image, used as border.

Let Me Clear - The numbers used in above examples, are pixels, not sections.

CSS Online Test

« Previous Tutorial Next Tutorial »