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:

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:

length - used to define the width in pixels
number - used to define times (multiplies) the size of border. The default value is 1
% - used to refer to the size of border image area. Here width for horizontal and height for vertical offsets
auto - used to define the natural size, that is the height of the image slice
initial - used to define the default value
inherit - used to inherit the value from its parent

CSS border-image-width with Multiple Values

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

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

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 »