The border-image
CSS property draws an image around a given element. It replaces the element's regular border.
The border-image
CSS property draws an image around a given element. It replaces the element's regular border.
Note: You should specify a separate border-style
in case the border image fails to load. Although the specification doesn't strictly require it, some browsers don't render the border image if border-style
is none
or border-width
is 0
.
This property is a shorthand for the following CSS properties:
/* 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; /* Global values */ border-image: inherit; border-image: initial; border-image: revert; border-image: revert-layer; border-image: unset;
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'>
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.
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:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
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("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; }
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
border-image |
167 | 1212 |
15["Small SVGs are incorrectly stretched, because percentages inborder-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.5Before Firefox 15, an earlier version of the specification was implemented, prefixed. |
11 | 1110.5–15 | 63 | 4.42 | 1818 |
15["Small SVGs are incorrectly stretched, because percentages inborder-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)."]4Before Firefox 15, an earlier version of the specification was implemented, prefixed. |
1111–14 | 63.2 | 1.01.0 |
fill |
16 | 12 | 15 | 11 | 15 | 6 | ≤37 | 18 | 15 | 14 | 6 | 1.0 |
gradient |
7 | 12 | 29 | 11 | 15 | 4 | ≤37 | 18 | 29 | 14 | 3.2 | 1.0 |
optional_border_image_slice |
16 | 12 | 15 | 11 | 15 | 6 | ≤37 | 18 | 15 | 14 | 6 | 1.0 |
border
outline
box-shadow
background-image
url()
functionconic-gradient()
, repeating-conic-gradient()
, linear-gradient()
, repeating-linear-gradient()
, radial-gradient()
, repeating-radial-gradient()
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image