Summary
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.
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 value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | as each of the properties of the shorthand:
::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:
|
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
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 repeated (repeat)
The image is sliced and simply tiled to fill the border area.
<div id="repeat">The image is tiled (repeated) to fill the area.</div>
#repeat {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
border-image:url("/files/4127/border.png") 30 30 repeat;
}
Live Sample:
Bitmap repeated (round)
The round option is a variation on the repeat option that distributes the tiles in such a way that the ends nicely connect.
<div id="round">The image is tiled (repeated) to fill the area.</div>
#round {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
border-image:url("/files/4127/border.png") 30 30 round;
}
Live Sample:
Bitmap stretched
The 'stretch' option stretches the images to fill the border area.
<div id="stretch">The image is stretched to fill the area.</div>
#stretch {
border: 15px solid transparent;
padding: 10px 20px;
-moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
border-image:url("/files/4127/border.png") 30 30 stretch;
}
Live Sample:
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
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1)-moz[1] 15 (15)[2] |
7.0-webkit 16.0 |
11 | 10.5 / 11.0-o[3] 15.0 |
3.0-webkit 6.0 |
optional <border-image-slice> |
15 (15) | ? | ? | ? | ? |
fill keyword |
15 (15) | (Yes) | ? | No support | 6 |
<gradient> |
29.0 (29.0) | (Yes) | (Yes) | (Yes) | (Yes) |
| Feature | Android Browser | Firefox Mobile (Gecko) | iOS Safari | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1-webkit | 3.5 (1.9.1)-moz[1] 15 (15)[2] |
3.2 -webkit 6.0 |
No support | 11.0-o |
optional <border-image-slice> |
? | 15.0 (15) | ? | No support | ? |
fill keyword |
18.0 | 15.0 (15) | 6 | No support | No support |
<gradient> |
(Yes) | 29.0 (29.0) | (Yes) | (Yes) | (Yes) |
[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12).
[2] Until Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) SVGs without dimensions were not sliced correctly (bug 619500. Starting from that version they are displayed the same like SVGs with dimensions, though if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
[3] For Opera, the prefixed property was added after the non-prefixed.