CSS Property border-image-source

The border-image-source property specifies the image to be used rather than the border designs given by the border-style properties and as an extra background layer for the component.

If the worth is none or if the image can not be displayed (or the property doesn’t apply), the border designs are going to be used; otherwise the element’s borders area unit invisible and therefore the border image is drawn as represented by the border-image-slice,
border-image-width, border-image-outset, and border-image-repeat properties.

For a close rationalization on however these properties work with the border-image-source property, see the border-image shorthand property’s entry.

CSS Property border-image-source Value

  • none
  • <image>


No border image is applied.


See the image entry for a list of possible values.

Desktop Browser Support

Mobile Browser Support


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> */


  1. naturally like your website however you need to check the spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it very bothersome to tell the truth nevertheless I will definitely come again again.

Leave a Reply