Web/CSS/border-image

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Constituent properties

This property is a shorthand for the following CSS properties:

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

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.

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.

• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1  | Understanding WCAG 2.0

Formal definition

Initial value	as each of the properties of the shorthand: border-image-source: none border-image-slice: 100% border-image-width: 1 border-image-outset: 0 border-image-repeat: stretch
Applies to	all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited	no
Percentages	as each of the properties of the shorthand: border-image-slice: refer to the size of the border image border-image-width: refer to the width or height of the border image area
Computed value	as each of the properties of the shorthand: border-image-outset: as specified, but with relative lengths converted into absolute lengths border-image-repeat: as specified border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified border-image-source: none or the image with its URI made absolute border-image-width: as specified, but with relative lengths converted into absolute lengths
Animation type	discrete

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:

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/10/10/4127/7fa64c42d4cfefa59f0ecaa838eeb89f/border.png|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 */
}

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;
}

Specifications

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

Initial value	as each of the properties of the shorthand: border-image-source: none border-image-slice: 100% border-image-width: 1 border-image-outset: 0 border-image-repeat: stretch
Applies to	all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited	no
Percentages	as each of the properties of the shorthand: border-image-slice: refer to the size of the border image border-image-width: refer to the width or height of the border image area
Computed value	as each of the properties of the shorthand: border-image-outset: as specified, but with relative lengths converted into absolute lengths border-image-repeat: as specified border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified border-image-source: none or the image with its URI made absolute border-image-width: as specified, but with relative lengths converted into absolute lengths
Animation type	discrete

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
border-image	Chrome 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 11	Opera Full support 11 Full support 11 No support 10.5 — 15 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 ≤37 Full support ≤37 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 18 Full support 18 Full support 18 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 Full support 11 No support 11 — 14 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 Full support 1.0 Full support 1.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
fill	Chrome Full support 16	Edge Full support 12	Firefox Full support 15	IE Full support 11	Opera Full support 15	Safari Full support 6	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 15	Opera Android Full support 14	Safari iOS Full support 6	Samsung Internet Android Full support 1.0
<gradient>	Chrome Full support 7	Edge Full support 12	Firefox Full support 29	IE Full support 11	Opera Full support 15	Safari Full support 4	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 29	Opera Android Full support 14	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0
optional <border-image-slice>	Chrome Full support 16	Edge Full support 12	Firefox Full support 15	IE Full support 11	Opera Full support 15	Safari Full support 6	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 15	Opera Android Full support 14	Safari iOS Full support 6	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

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.

See also

• border
• outline
• box-shadow
• background-image
• url() function
• Gradient functions: conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()

border-image by Mozilla Contributors is licensed under CC-BY-SA 2.5.