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:

border image demo

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:

CSS border-image-outset with Multiple Values

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

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 »


Liked this post? Share it!