Border Image Property
Last updated: 2026-09-13
border-image Border Image Property
border-image lets you use an image to draw an element's border instead of a solid or dashed line. The image is sliced into a nine-part grid (four corners, four edges, and a center area) and each part is mapped to the corresponding border area. It is a powerful tool for complex decorative borders.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
border-image: <border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat> | Value | Border image shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-image | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Warning： When using border-image, you must also declare border or border-width, otherwise the image border will not be visible.
Tip： The border-image-slice value is the distance to cut inward from the image edges; the round keyword makes the border image tile and scale to fit the side length.
❓ FAQ
QHow good is browser support for border-image?
AModern browsers (Chrome, Firefox, Edge, Safari) all support it, but IE11 and earlier have limited or no support. Always declare border: solid with border-width as a fallback so browsers without border-image render a normal border; otherwise the element may end up with no border at all.
QWhy doesn't my border show after using border-image?
ACommon causes: no border-width set — border-image does not provide width on its own, so you need border first to create the border area; a wrong image path; or a slice value larger than the actual image. The reliable pattern is border: 20px solid transparent; followed by border-image.
QWhat do slice, repeat, and outset mean in border-image?
Aslice is the distance cut inward from each edge to form the nine-part grid (unitless, treated as pixels or percentages). repeat determines how the edges fill: stretch (stretch), round (tile and scale to fit), and repeat (tile, possibly clipped). outset extends the border image outward. The shorthand order is: url(image) slice / width / outset repeat.
QCan border-image be used together with border-radius?
ANot really. The border-image is not clipped by border-radius, so the rounded area shows protruding image corners or jagged edges, and the combination looks bad. For a 'rounded corner plus image border' effect, simulate it with background-image and padding, or use mask techniques.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
