border-image-outset Archives

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!