CSS border-image-outset

The CSS border-image-outset property is used when we need to extend the area of the border image. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {margin: 20px; border: 4px solid transparent;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 10;}
      p#xyz {border-image-outset: 16px;}
   </style>
</head>
<body>

   <h2>Without border-image-outset</h2>
   <p>This is a para.</p>
   
   <h2>With border-image-outset</h2>
   <p id="xyz">This is another para.</p>
   
</body>
</html>

Output

Without border-image-outset

This is a para.

With border-image-outset

This is another para.

In above program, the image used is:

CSS border-image-outset Syntax

The syntax of border-image-outset property in CSS, is:

border-image-outset: value;

The value should be any of the following:

length - used to define the particular length. The default value is 0
number - used when we need to multiply with the border-width
initial - used to set the default value
inherit - used to inherit from its parent

CSS border-image-outset with Multiple Values

We can also define multiple values to border-image-outset.

If one value, then applies to all (four) sides
If two values, then first applies to top and bottom, second applies to right and left borders
If three values, then first applies to top, second applies to right and left, third applies to bottom border
If four values, then first applies to top, second applies to right, third applies to bottom, and fourth applies to left border

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {margin: 20px; border: 4px solid transparent;
         border-image-source: url(images/border-image-demo.png);
         border-image-slice: 10;}
      p#one {border-image-outset: 10px;}
      p#two {border-image-outset: 10px 15px;}
      p#three {border-image-outset: 10px 15px 20px;}
      p#four {border-image-outset: 6px 12px 18px 24px;}
   </style>
</head>
<body>

   <p id="one">This is a para.</p><br/>
   <p id="two">This is another para.</p><br/>
   <p id="three">This is para three.</p><br/>
   <p id="four">This is the last para.</p>
   
</body>
</html>

Output

This is a para.

This is another para.

This is para three.

This is the last para.

CSS Online Test

« Previous Tutorial Next Tutorial »