CSS3 border-image-source Property


Example

Use an image as the border around a <div> element:

div {
    border-image-source: url(border.png);
}

Try it yourself »

Definition and Usage

The border-image-source property specifies an image to be used, instead of the border styles given by the border-style properties.

Tip: If the value is "none", or if the image cannot be displayed, the border styles will be used.

Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties).

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.borderImageSource="url(border.png)" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-image-source 15.0 11.0 15.0 6.0 15.0


CSS Syntax

border-image-source: none|image|initial|inherit;

Property Values

Value Description
none No image will be used
image The path to the image to be used as a border
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS3 tutorial: CSS3 Borders

CSS Reference: border-image property

CSS Reference: border-image-outset property

CSS Reference: border-image-repeat property

CSS Reference: border-image-slice property

CSS Reference: border-image-width property

HTML DOM reference: borderImageSource property



Color Picker

colorpicker