CSS border-image property

CSS border-image

CSS border-image property is a short hand property. It is used in an element to set an image as the border.

border-image consists of following shorthand properties

  • border-image-source : It is used to set the image path, which is used as the border.
  • border-image-width : It is used to set the width of the border image.
  • border-image-slice : It is used to divide the image into number of regions and to form the elements component.
  • border-image-outset : It is used to set the distance between the border box and the image.
  • border-image-repeat : It is used to set whether the image should be repeated or not.

To support border-image property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

Example

Try Yourself

In the above example values used in border-image property are,

url(flower.jpg) - border-image-source

450 - border-image-width

space - border-image-repeat