CSS border-image-width Property

The CSS border-image-width property defines the width of the border-image.

Syntax:

border-image-width: length|number|%|auto;

length - a length unit (in px) defining the size of the border-width.

number - represents multiples of the corresponding border-width (the default value is 1).

% - refers to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.

auto - if defined, the width is the intrinsic width or height of the corresponding image slice.

Example:

<!DOCTYPE html> <html> <head> <style>  #borderimg-1 {    border: 10px solid transparent;   padding: 15px;   border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);   border-image-repeat: round;   border-image-slice: 30;   border-image-width: 10px;     }  #borderimg-2 {    border: 10px solid transparent;   padding: 15px;   border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);   border-image-repeat: round;   border-image-slice: 30;   border-image-width: 15px;     }  #borderimg-3 {    border: 10px solid transparent;   padding: 15px;   border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);   border-image-repeat: round;     border-image-slice: 30;   border-image-width: 20px;     } </style> </head> <body>  <p id="borderimg-1">border-image-width: 10px;</p> <p id="borderimg-2">border-image-width: 15px;</p> <p id="borderimg-3">border-image-width: 20px;</p>  </body> </html>

Output:




border-image-width: 10px;

border-image-width: 15px;

border-image-width: 20px;



The original image:

CSS border-image Property

Enjoy coding!

Read also:

CSS Border Property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape