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

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(http://docs.webplatform.org/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

See also

Related articles

Border

Other articles