CSS border-image-outset Property

The border-image-outset property sets a border image outset.

It specifies how far the image extends beyond the border.

Values are specified in pixels or in numbers where 1 unit is equal to the border width.

Example

#

A border image with a border-image-outset.

Element with image border outset
<style>
  .border-image-outset {
    padding: 15px;
    border: 30px solid transparent;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
    border-image-outset: 10px;
  }
</style>

<div class="border-image-outset">
  Element with image border outset
</div>

Syntax

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

Values

#

Value Description
length Sets how far from the edges the border-image in units will appear.
The default value is 0
number Multiples of the corresponding border-width
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-image-outset values.

Element with border image outset setting
<style>
  .border-image-outset-border {
    border: 20px solid transparent;
    padding: 15px;
    margin: 30px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
    border-image-outset: 1.5;
  }
</style>

<div class="border-image-outset-border">
  Element with border image outset setting
</div>

Browser support

This table shows when border-image-outset support started for each browser.

Chrome
15.0 Oct 2011
Firefox
15.0 Aug 2012
IE/Edge
11.0 Oct 2013
Opera
15.0 May 2013
Safari
6.0 Jul 2012

You may also like

Guides