The border-image property allows drawing an image on the borders of an element and is a shorthand for expanded list of the properties that define border image.

The units that may be used are URL for the image source, length for slice, width and outset, repeat for repeat. Basically these values are very similar like a CSS background property in combination with border property, thus URL standing for an image source, repeat for repeat, no-repeat, repeat-y or repeat-x, while outset is identical to border style. The value width, however applies to the slice width, and not the border width.

Syntax:

selector {

   border-image: url(source.jpg) slice width outset repeat;

}

Values:

Here is the full list of all values:

  • border-image-source: This property specifies the path to the image which we want to use for the border.
  • border-image-slice: This property defines how the image should be sliced up. It expects 1?4 length numbers or percentages that indicate how much of each side should be used for the border. The values are defined in this manner:
    • One value: Applies to all sides.
    • Two values: The first value applies to the top and bottom, and the second to the right and left sides.
    • Three values: The first value applies to the top, the second to the right and left sides, and the third one to the bottom.
    • Four values: The values apply to each side starting from the top and moving clockwise.
  • border-image-width: Sets the amount of space allocated to the border image on each side. This property sets the width of the slices, NOT the width of the border. The border-image-width property accepts up to four values, which are allocated to each side in the same way as slices. The values can be specified as lengths, percentages, or numbers. A number represents a multiple of the computed border-width. Percentages are relative to the width or height of the border box for horizontal and vertical slices, respectively.
  • border-image-outset: Specifies how far the border image should extend beyond the border box.
  • border-image-repeat: Specifies how the slices are scaled and tiled along the horizontal and vertical edges
  • initial, inherit

Example

Border image property applied for multiple browsers:

 

›› go to examples ››