The border-image CSS property draws an image in place of an element's border-style.

This property is a shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. As with all shorthand properties, any omitted sub-values will be set to their initial value.

Note: You should specify a border-style in case the border image fails to load. Indeed, this is required according to the specification, although not all browsers implement it.

Syntax

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

The border-image property may be specified with anywhere from one to five of the values listed below.

Note: If the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead.

Values

<'border-image-source'>
The source image. See border-image-source.
<'border-image-slice'>
The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice.
<'border-image-width'>
The width of the border image. Up to four values may be specified. See border-image-width.
<'border-image-outset'>
The distance of the border image from the element's outside edge. Up to four values may be specified. See border-image-outset.
<'border-image-repeat'>
Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See border-image-repeat.

Formal syntax

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

Examples

Bitmap

In this example, we will apply a diamond pattern to an element's borders. The source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally:

an example borderimage

HTML

<div id="bitmap">This element is surrounded by a bitmap-based border image!</div>

CSS

To match the size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions. To center the border image on the edge of the element's background, we will make the outset values equal to half of the width values. Finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps.

#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image:
      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
      27 /                    /* slice */
      36px 28px 18px 8px /    /* width */
      18px 14px 9px 4px       /* outset */
      round;                  /* repeat */
}

Result

Gradient

HTML

<div id="gradient">This element is surrounded by a gradient-based border image!</div>

CSS

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}

Result

Accessibility concerns

Assistive technology cannot parse border images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

Specifications

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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 16
Full support 16
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 15
Notes
Full support 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes 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).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Full support 3.5
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
IE Full support 11Opera Full support 10.5
Full support 10.5
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 6
Full support 6
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 2
Prefixed
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 15
Notes
Full support 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes 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).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
Opera Android Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 6
Full support 6
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
optional <border-image-slice>Chrome ? Edge ? Firefox Full support 15IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 15Opera Android ? Safari iOS ? Samsung Internet Android ?
fill keywordChrome Full support YesEdge ? Firefox Full support 15IE ? Opera ? Safari Full support 6WebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 15Opera Android ? Safari iOS Full support 6Samsung Internet Android ?
<gradient>Chrome Full support YesEdge ? Firefox Full support 29IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 29Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.