CSS border-image-source Property

The border-image-source property sets the border image URL.

The URL can be relative or absolute.

Example

#

An image border using border-image-source.

An element with border-image-source setting.
<style>
  .border-image {
    border: 20px solid transparent;
    padding: 15px;
    border-image-source: url(/img/css/wheatfield-with-crows.jpg);
    border-image-repeat: repeat;
  }
</style>

<div class="border-image">
  An element with border-image-source setting.
</div>

Syntax

border-image-source: none | image | initial | inherit;

Values

#

Value Description
none No image will be used
image Path or URL of the image to be used as a border
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-color values.

An element with border-image-source setting.
<style>
  .border-image-example {
    border: 20px solid transparent;
    padding: 15px;
    border-image-source: url(/img/css/wheatfield-with-crows.jpg);
  }
</style>

<div class="border-image-example">
  An element with border-image-source setting.
</div>

Browser support

This table shows when border-image-source 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