Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!

Summary

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The border-image is used instead of the border styles given by the border-style properties. Though the specification requires that border-style must be present if border-image is used, some browsers many not implement this.

It is important to note that if the computed value of border-image-source, which can be set either by border-image-source or the shorthand border-image, is none, or if the image cannot be displayed, the border styles will be used.

Initial valueas each of the properties of the shorthand:
Applies toas each of the properties of the shorthand:
. It also applies to ::first-letter.
Inheritedno
Percentagesas each of the properties of the shorthand:
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

Values

See the respective properties for the different values.

Formal syntax

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Examples

Bitmap

CSS content

#bitmap { 
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

HTML content

<div id="bitmap">The image is stretched to fill the area.</div>

Gradient

CSS content

#gradient { 
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

HTML content

<div id="gradient">The image is stretched to fill the area.</div>

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1)-moz[1]
15 (15)[2]
7.0-webkit
16.0
11 10.5 / 11.0-o[3]
15.0
3.0-webkit
6.0
optional <border-image-slice> 15 (15) ? ? ? ?
fill keyword 15 (15) (Yes) ? No support 6
<gradient> 29.0 (29.0) (Yes) (Yes) (Yes) (Yes)
Feature Android Browser Firefox Mobile (Gecko) iOS Safari Opera Mini Opera Mobile
Basic support 2.1-webkit 3.5 (1.9.1)-moz[1]
15 (15)[2]
3.2 -webkit
6.0
No support 11.0-o
optional <border-image-slice> ? 15.0 (15) ? No support ?
fill keyword 18.0 15.0 (15) 6 No support No support
<gradient> (Yes) 29.0 (29.0) (Yes) (Yes) (Yes)

[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12).

[2] Until Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) SVGs without viewport were not sliced correctly (bug 619500). Starting from Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) they are displayed the same like SVGs with viewport, though if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809). This was fixed in Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), though there's still an issue for SVGs without viewport when e10s is disabled (bug 1290782).

Also, small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).

In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] For Opera, the prefixed property was added after the non-prefixed.