CSS3 border-image-source Property


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.

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




Search w3schools.com:

Translate w3schools.com: