I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Unisciti a noi e traducilo tu stesso.
Puoi anche consultare l’articolo in English (US).

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.

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

Though the specification requires that border-style must be present if border-image is used, some browsers may 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 toall elements, except internal table elements when border-collapse is collapse. 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

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") 27;
}

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support

16

7 -webkit-

(Yes)

(Yes) -webkit-

151 2 3 4

3.5 -moz- 5

44 -webkit- 6

11

10.5

11 -o-

6

3 -webkit-

optional <border-image-slice> ? ?15 ? ? ?
fill keyword (Yes) ?15 ? ?6
<gradient> (Yes) ?29 (Yes) (Yes) (Yes)
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support2.1 -webkit- ?

(Yes)

(Yes) -webkit-

151 2 3 4

3.5 -moz- 5

44 -webkit- 6

?11 -o-

6

3.2 -webkit-

optional <border-image-slice> ? ? ?15 ? ? ?
fill keyword18 ? ?15 ? ?6
<gradient> (Yes) ? ?29 ? (Yes) (Yes)

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

2. Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).

3. From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).

4. Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).

5. An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.

6. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.