border-image property

Specifies how an image is to be used in place of the border styles.

CSS Backgrounds and Borders Module Level 3, Section 6

Syntax

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? / <border-image-outset> ]? || <border-image-repeat>

Property values

One or more of the following values.

border-image-outset: Any of the range of outset values available to the border-image-outset property.
border-image-repeat: Any of the range of repeat values available to the border-image-repeat property.
border-image-slice: Any of the range of slice values available to the border-image-slice property.
border-image-source: Any of the range of image source values available to the border-image-source property.
border-image-width: Any of the range of width values available to the border-image-width property.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	(see individual properties)

Standards information

CSS Backgrounds and Borders Module Level 3, Section 6

Remarks

The border-image property is a shorthand property. Separate properties can be used to specify each component of a CSS border image, but in many cases it is more convenient to set them in one place using this shorthand property.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-border-image" as an alias for this property.

Examples

This example uses the border-image property to set the values for the border of an element. Below is a div element with a solid black, 15 pixel-wide border. The black area is the border box, or border area. This is where the border image will be confined to by default. This can be adjusted by specifying values for border-image-width and border-image-outset.

An HTML element with a 15 pixel black border.

The picture below (with a transparent background) is an 81 x 81 pixel image used for the border image in the following example.

An image of blue and green circles arranged in a square with a transparent background.

After styling the element with border-image properties, the original border styles are overridden and the sliced-up border image will fill the border box.

CSS


#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 round stretch;
}

The styles above are used to define border image styles on an HTML element and it looks like the following image.

An HTML element with a border styled with the border-image property.

The numbers following the image source define slicing distances for the image (border-image-slice). The slicing distances are set at 27 pixels from the top, right, bottom, and left of the image. "Round" and "stretch" refer to how the images fills the area between the border (border-image-repeat). The first value, "round", is applied to the horizontal sides, and the second value, "stretch", is applied to the vertical sides.

You can further manipulate the border image using the border-image-width property and the border-image-outset property. Using the same CSS as above, you can add border-image-width and border-image-outset to the shorthand border-image property. The styles below are used to define border image styles on an HTML element and it looks like the image below.

An HTML element styled using the border-image property.

The syntax for border-image uses a double bar (||) which means that one or more of properties must occur, in any order. The forward slash (/) in the syntax is a separator to disambiguate the terms that can come in any order.

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? / <border-image-outset> ]? || <border-image-repeat>

CSS


#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 /10px 20px /0px 20px 30px 0px round stretch;
}

Like the previous example, the "27 27" following the image source are the slicing distances from the top, right, bottom, and left of the image.

The values "/10px 20px" specify border-image-width values. The first of these two values, 10px, specifies the border-image-width for the horizontal sides, and the second value, 20px, specifies the border-image-width for the vertical sides.

The following four values, /0px 20px 30px 0px, specify border-image-outset values, or the amount by which the border image area extends beyond the border box. These values correspond to the top, right, bottom, and left outset values.

Like the example above, round and stretch refer to how the images fills the area between the border (border-image-repeat).