
The CSS border-image-outset property defines the amount by which the border-image area extends beyond the border-box.
Demo:
Click the “Try it” button to change the border-image-outset property of the div element to 15px:
Hello World!
Syntax:
border-image-outset: length|number;
length – a length unit defining how far from the edges the border image will appear (the default value is 0).
number – represent multiples of the corresponding border-width.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1, #borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
border-image-width: 15px;
border-image-repeat: round;
border-image-slice: 30;
}
#borderimg1 {
border-image-outset: 5px;
}
#borderimg2 {
border-image-outset: 15px;
}
</style>
</head>
<body>
<p id="borderimg1">Some text...some text...some-text...</p>
<br>
<p id="borderimg2">Some text...some text...some-text...</p>
</body>
</html>
Output:
border-image-outset: 5px;
border-image-outset: 15px;
The original image:

Enjoy coding!
Read also: