CSS border-image-width (Set/Change Width of Image Border)

The CSS border-image-width property is used to define the width of the image, used for the border. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 15px solid transparent; padding: 20px;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 12;}
      p#one {border-image-width: 12px;}
      p#two {border-image-width: 18px;}
      p#three {border-image-width: 24px;}
   </style>
</head>
<body>

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

This is a para.

This is another para.

This is the para three.

In above program, the image used is:

border image demo

CSS border-image-width Syntax

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

border-image-width: x;

The value of x should be any of the following:

CSS border-image-width with Multiple Values

We can also define the border-image-width property with multiple values:

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 20px solid transparent; padding: 18px;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 22;}
      p#one {border-image-width: 8px 16px 24px 32px;}
      p#two {border-image-width: 8px 16px 24px;}
      p#three {border-image-width: 8px 16px;}
      p#four {border-image-width: 8px;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p>
   <p id="two">This is another para.</p>
   <p id="three">This is the para three.</p>
   <p id="four">This is para four.</p>
   
</body>
</html></pre>
Output

This is a para.

This is another para.

This is the para three.

This is para four.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!