CSS - border-image-outset Property

CSS border-image-outset property defines the distance by which the border image area extends outward beyond the border box, effectively pushing the border image further away from the content and border edges of the element.

Syntax

border-image-outset: length | number | initial | inherit;

Property Values

Value	Description
length	It specifies the distance from the border the image will be at. Any length unit can be used. Default is 0.
number	It specifies the multiples of the border-width.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Image Outset Property

The following examples explain the border-image-outset property with different values.

Border Image Outset Property with Length Values

The outset parameter determines how far the image will be from the border, this distance can be specified by length (10px, 50px etc.). In the followning example, three different length values have been used with the border-image-outset property to highlight the difference.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 20px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 5px;
      }

      .inner-box2 {
         border-image-outset: 25px;
      }

      .inner-box3 {
         border-image-outset: 42px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has 5px outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 25px outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 42px outset
         </p>
      </div>
   </div>

</body>

</html>

Border Image Outset Property with Numeric Values

The distance from the border can also be specified by numeric values (2,4 etc.), they represent the multiples of the border-width. In the followning example, three different numeric values have been used with the border-image-outset property to highlight the difference.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 30px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 1;
      }

      .inner-box2 {
         border-image-outset: 2;
      }

      .inner-box3 {
         border-image-outset: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has 1 value outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 2 value outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 4 value outset
         </p>
      </div>
   </div>

</body>

</html>

Border Image Outset Property with Multiple Values

The border-image-outset property accepts up to four values. A single value applies to all borders, two values set top/bottom and left/right, three values cover top, right, and bottom, and four values specify each border individually. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 30px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 1;
      }

      .inner-box2 {
         border-image-outset: 20px 40px;
      }

      .inner-box3 {
         border-image-outset: 2 4 5;
      }

      .inner-box4 {
         border-image-outset: 15px 20px 45px 55px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has single outset, 
            all borders have same outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 2 outset values, 
            top and bottom have one outset, left 
            and right have another outset.
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 3 outset values, 
            top has one outset, right has one 
            outset and bottom has one outset.
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box4 inner">
         <p>
            This box has 4 outset values, 
            top has one outset, right has one outset,
            bottom has one outset and left 
            has one outset.
         </p>
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
border-image-outset	15.0	11.0	15.0	6.0	15.0

css_reference.htm

Print Page