在此页

• 组成特性
• 句法
• 可访问性关注
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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.

注意： 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.

组成特性

此特性是下列 CSS 特性的简写：

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

句法

/* 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;
					

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

注意： 若 computed value of border-image-source is none , or if the image cannot be displayed, the border-style will be displayed instead.

值

<'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 .

可访问性关注

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

形式定义

初始值	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
适用于	all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter .
继承	no
百分比	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
计算值	as each of the properties of the shorthand: border-image-outset : as specified, but with relative lengths converted into absolute lengths border-image-repeat ：如指定 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
动画类型	discrete

形式句法

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

范例

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:

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

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image' in that specification.	候选推荐	初始定义

初始值	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
适用于	all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter .
继承	no
百分比	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
计算值	as each of the properties of the shorthand: border-image-outset : as specified, but with relative lengths converted into absolute lengths border-image-repeat ：如指定 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
动画类型	discrete

浏览器兼容性

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. 更新 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 完整支持 16	Edge 完整支持 12	Firefox 完整支持 15 注意事项 完整支持 15 注意事项 注意事项 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats ( bug 1284797 ). 注意事项 Until Firefox 47, SVGs without viewport were not sliced correctly ( bug 619500 ). 注意事项 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 ). 注意事项 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled ( bug 1290782 ). 完整支持 3.5 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11	Opera 完整支持 11 完整支持 11 不支持 10.5 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 6	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 15 注意事项 完整支持 15 注意事项 注意事项 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats ( bug 1284797 ). 注意事项 Until Firefox 47, SVGs without viewport were not sliced correctly ( bug 619500 ). 注意事项 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 ). 注意事项 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled ( bug 1290782 ). 完整支持 4 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 11 完整支持 11 不支持 11 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0
fill	Chrome 完整支持 16	Edge 完整支持 12	Firefox 完整支持 15	IE 完整支持 11	Opera 完整支持 15	Safari 完整支持 6	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 15	Opera Android 完整支持 14	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0
<gradient>	Chrome 完整支持 7	Edge 完整支持 12	Firefox 完整支持 29	IE 完整支持 11	Opera 完整支持 15	Safari 完整支持 4	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 29	Opera Android 完整支持 14	Safari iOS 完整支持 3.2	Samsung Internet Android 完整支持 1.0
optional <border-image-slice>	Chrome 完整支持 16	Edge 完整支持 12	Firefox 完整支持 15	IE 完整支持 11	Opera 完整支持 15	Safari 完整支持 6	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 15	Opera Android 完整支持 14	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

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

元数据

• 最后修改： Jul 27, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Backgrounds and Borders
4. 指南

   1. Resizing background images with background-size
   2. Using multiple backgrounds
5. 特性

   1. background
   2. background-attachment
   3. background-clip
   4. background-color
   5. background-image
   6. background-origin
   7. background-position
   8. background-position-x
   9. background-position-y
   10. background-repeat
   11. background-size
   12. border
   13. border-bottom
   14. border-bottom-color
   15. border-bottom-left-radius
   16. border-bottom-right-radius
   17. border-bottom-style
   18. border-bottom-width
   19. border-color
   20. border-image
   21. border-image-outset
   22. border-image-repeat
   23. border-image-slice
   24. border-image-source
   25. border-image-width
   26. border-left
   27. border-left-color
   28. border-left-style
   29. border-left-width
   30. border-radius
   31. border-right
   32. border-right-color
   33. border-right-style
   34. border-right-width
   35. border-style
   36. border-top
   37. border-top-color
   38. border-top-left-radius
   39. border-top-right-radius
   40. border-top-style
   41. border-top-width
   42. border-width
   43. box-shadow