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:

  • 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 »

Follow/Like Us on Facebook




Subscribe Us on YouTube