CSS border-image Property

The border-image property specifies an image as border.

Instead of a solid color, the border is drawn with an image.

Example

#

An element with an image as border.

A element with an image border.
<style>
  .border-image {
    padding: 20px;
    border: 20px solid transparent;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
  }
</style>

<div class="border-image">
  A element with an image border.
</div>

Using border-image

The border-image property is a shorthand for the following:

Syntax

border-image: URL slice width outset repeat | 
              initial | inherit;

Values

#

Value Description
border-image-source URL or path to the image
border-image-slice Border image slice
border-image-width Border image width
border-image-outset Amount the border-image area extends beyond the border-box
border-image-repeat Sets if the image should be repeated, rounded or stretched
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

A stretched border image, filling the entire element width and height.

Stretched image to fill the area.
<style>
  .border-image-stretched {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 stretch;
  }
</style>

<div class="border-image-stretched">
  Stretched image to fill the area.
</div>

Did you know?

Did you know?

Borders with a gradient color

You can use gradients to create an element's border.

An element with a gradient border
<style>
  .border-wrap {
    max-width: 350px;
    padding: 15px;
    position: relative;
    background: linear-gradient(to right, orangered, purple);
  }

  .content {
    background: #fff;
    color: #000;
    padding: 20px;
  }
</style>

<div class="border-wrap">
  <div class="content">
    An element with a gradient border
  </div>
</div>

Browser support

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

Chrome
16.0 Dec 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