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:

border image demo

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:

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.

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 »


Liked this post? Share it!