Widely availableSupported across all major browsers. Safe to use in production.
Effects Widely available

Border images

The border-image CSS property draws an image around an element.

Effects

Overview

The border-image CSS property draws an image around an element.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
border-image
16
12
15
6
18
6
Other
css.properties.border-image-outset

The border-image-outset CSS property sets the distance by which an element's border image is set out from its border box.
15
12
15
6
18
6
css.properties.border-image-repeat

The border-image-repeat CSS property defines how the images for the sides and the middle part of the border image are scaled and tiled. The middle region can be displayed by using the keyword "fill" in the border-image-slice property.
15
12
15
6
18
9.3
CSS property
repeat
15
12
15
6
18
9.3
round
30
12
15
9.1
30
9.3
space
56
12
50
9.1
56
9.3
stretch
15
12
15
6
18
9.3
Other
css.properties.border-image-slice

The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.
15
12
15
6
18
6
css.properties.border-image-source

The border-image-source CSS property sets the source image used to create an element's border image.
15
12
15
6
18
6
css.properties.border-image-width

The border-image-width CSS property sets the width of an element's border image.
16
12
13
6
18
6
CSS property
auto
16
12
15
6
18
6
fill
16
12
15
6
18
6
gradient

`<gradient>`
7
12
29
4
18
3.2
none
16
12
3.5
3
18
2
optional border image slice

optional `<border-image-slice>`
16
12
15
6
18
6
repeat
16
12
3.5
3
18
2
round
16
12
3.5
3
18
2
space
16
12
3.5
3
18
2
stretch
16
12
3.5
3
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Before Chrome 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Notes 2 item(s)
Implementation note
  • Before Edge 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 6 item(s)
Implementation note
  • 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).
Compatibility
  • Available with a vendor prefix: -moz- (3.5)
  • Before Firefox 15, an earlier version of the specification was implemented, prefixed.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 2 item(s)
Implementation note
  • Before Chrome Android 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 4 item(s)
Implementation note
  • 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).
Notes 1 item(s)
Implementation note
  • Before Chrome 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).
Notes 1 item(s)
Implementation note
  • Before Edge 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).
Notes 1 item(s)
Implementation note
  • Before Chrome Android 112, a border image's absolute or percentage length width may not take precedence over a narrower `border-width` (bug 40541033).

Syntax

CSS 
/* Gradient border */
.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(45deg, #f06, #9f6) 1;
}

/* Image Border */
.fancy-border {
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

Live demo

Gradientboundary

Border images Gradientboundary demo.

PreviewFullscreen

gradient

Border images gradient demo.

PreviewFullscreen

rainbowcolorborder

Border images rainbowcolorborder demo.

PreviewFullscreen

Use cases

  • Using Border images

    The border-image CSS property draws an image around an element.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features