CSS border-image-source Property

Example

Specify an image as the border around an element:

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

Definition and Usage

The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element).

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.
Version: CSS3
JavaScript syntax: object.style.borderImageSource="url(border.png)"

  • Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which border-image-source is applied.
  • Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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 Demo
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.  
inherit Inherits this property from its parent element.

Comments