CSS Reference Property

border-image-source

The border-image-source property specifies the image to be used instead of the border styles given by the border-style properties and as an additional background layer for the element.

If the value is none or if the image cannot be displayed (or the property doesn’t apply), the border styles will be used; otherwise the element’s borders are invisible and the border image is drawn as described by the border-image-slice,
border-image-width, border-image-outset, and border-image-repeat properties.

For a detailed explanation on how these properties work with the border-image-source property, see the border-image shorthand property’s entry.

Official Syntax

  • Syntax:

    border-image-source: none | <image>
                           
  • Initial: none
  • Applies To: All elements, except internal table elements when border-collapse is collapse
  • Animatable: no

Values

none
No border image is applied.
<image>
See the image entry for a list of possible values.

Notes

Even though any image value can be used with this CSS property, some browsers may only support images defined using the url() functional notation.

Examples

border-image-source: none; /* no border image, use the border styles defined by `border-style` */
border-image-source: url(path/to/some-image.png);
border-image-source: linear-gradient(to bottom, #333333, #eeeeee); /* a linear gradient is an <image> */
                

Live Demo

See the border-image entry for a live demo.

Browser Support

CSS3 Border images Support

Method of using images for borders

Current Status: W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 3.5*
  • 11
  • 10.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1
  • 11*
  • 56
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:41 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.