This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

border-image-source

Summary

The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead.

Overview table

Initial value
none
Applies to
all elements, except table elements where border-collapse: collapse is applied
Inherited
No
Media
visual
Computed value
‘none’ or the image with its URI made absolute
Animatable
No
CSS Object Model Property
borderImageSource
Percentages
N/A

Syntax

  • border-image-source: none
  • border-image-source: url(path/to/image.png)

Values

none
Default. border-style is used instead.
url(path/to/image.png)
This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at "CSS images: url()".

Examples

A simple example showing a <div> that has border-image-source property and other border-image properties.

<div class="pattern">border-image</div>

View live example

/* General setup of the containers */
div {
    height: 100px;
    width: 100px;
    margin: 25px;
    text-align: center;
    line-height: 100px;
    font-family: sans-serif;
}

/* This general class will apply the pattern to the containers */
.pattern {
    border-image-source: url(http://docs.webplatform.org/w/images/d/d8/border-image.png);
    border-image-slice: 30;
    border-image-width: 6;
    border-image-outset: 3;
}

View live example

Related specifications

CSS Level 3 - Backgrounds and Borders Module
W3C Candidate Recommendation

See also

Related articles

Border

Other articles