border-image

Summary

Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for ‘border’ property. It can be used to set border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat, or a subset of these.

Overview table

Initial value: based on individual properties
Applies to: All elements
Inherited: No
Media: visual
Computed value: based on individual properties
Animatable: No
CSS Object Model Property: borderImage
Percentages: N/A

Syntax

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat

Values

border-image-source border-image-slice border-image-width border-image-outset border-image-repeat: The border-image property can contain up to five components:

border-image-source: This can take a valid "CSS images: url()" as its value.
border-image-slice: This takes any of the values available to the border-image-slice property, which includes <number>, <percentage> and fill. For more details about each, see the border-image-slice page.
border-image-width: This takes a numeric value with any of the standard length units.
border-image-outset: This takes a numeric value with any of the standard length units.
border-image-repeat: This takes any of the type of values available to the border-image-repeat property, which includes stretch, repeat, round and space. For more details about each, see the border-image-repeat page.

Examples

A simple example showing a <div>.

<div class="pattern">one</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;
}

.pattern {
    border: 30px solid transparent;
    border-image: url(/docs/w/images/d/d8/border-image.png) 30 repeat;
}

View live example

Notes

border-image-slice: fill was introduced in latest recommendation and breaks backwards compatibility. If you want border-image to fill an inner area of your block you have to use this property.

Compatibility with other properties

border-radius has no effect on border-image.

Related specifications

CSS Backgrounds and Borders Module Level 3: W3C Candidate Recommendation