border-image-width Archives

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

Demo:

Click the “Try it” button to change the value of the border-image-width property 10px to 20px 30px:

Hello World!

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:

Enjoy coding!