Web development

CSS border-image-outset Property

CSS border-image-outset Property

The CSS border-image-outset property defines the amount by which the border-image area extends beyond the border-box.


Click the “Try it” button to change the border-image-outset property of the div element to 15px:

Hello World!


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.


<!DOCTYPE html>
#borderimg1, #borderimg2 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(;
  border-image-width: 15px;
  border-image-repeat: round;
  border-image-slice: 30;

#borderimg1 {
  border-image-outset: 5px; 

#borderimg2 {
  border-image-outset: 15px; 


<p id="borderimg1">Some text...some text...some-text...</p>
<p id="borderimg2">Some text...some text...some-text...</p>



border-image-outset: 5px;

border-image-outset: 15px;

The original image:

CSS border-image

Enjoy coding!

Read also:

CSS Border Property

CSS Multiple Borders

CSS Outline