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.
/* 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.
<'border-image-source'>
border-image-source
.<'border-image-slice'>
border-image-slice
.<'border-image-width'>
border-image-width
.<'border-image-outset'>
border-image-outset
.<'border-image-repeat'>
border-image-repeat
.<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
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:
<div id="bitmap">This element is surrounded by a bitmap-based border image!</div>
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 */ }
<div id="gradient">This element is surrounded by a gradient-based border image!</div>
#gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; }
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.
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image' in that specification. | Candidate Recommendation | Initial definition |
Initial value | as each of the properties of the shorthand:
|
---|---|
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:
|
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 16
|
12
|
15
|
11 | 10.5
|
6
|
optional <border-image-slice>
|
? | ? | 15 | ? | ? | ? |
fill keyword |
Yes | ? | 15 | ? | ? | 6 |
<gradient> |
Yes | ? | 29 | Yes | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 2
|
? | Yes
|
15
|
11
|
6
|
? |
optional <border-image-slice>
|
? | ? | ? | 15 | ? | ? | ? |
fill keyword |
Yes | ? | ? | 15 | ? | 6 | ? |
<gradient> |
Yes | ? | ? | 29 | Yes | Yes | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image