border-image
============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
The **`border-image`** CSS property draws an image around a given element. It replaces the element's regular border.

Try it
------

**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`.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
Syntax
------


```css
/\* 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.

### Values

`<'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`.

Accessibility concerns
----------------------

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.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 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:* `border-image-slice`: refer to the size of the border image
* `border-image-width`: refer to the width or height of the border image area
 |
| Computed value | as each of the properties of the shorthand:* `border-image-outset`: as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat`: as specified
* `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source`: `none` or the image with its URI made absolute
* `border-image-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset`: by computed value type
* `border-image-repeat`: discrete
* `border-image-slice`: by computed value type
* `border-image-source`: discrete
* `border-image-width`: by computed value type
 |

Formal syntax
-------------
```

border-image =   
  <'border-image-source'>                             ||  
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||  
  <'border-image-repeat'>                               
  
```

Examples
--------

### Bitmap

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:

![an example borderimage](/en-US/docs/Web/CSS/border-image/border.png)

#### HTML


```html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>
```


#### CSS

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.


```css
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}
```


#### Result

### Gradient

#### HTML


```html
<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>
```


#### CSS


```css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` function
* Gradient functions: `conic-gradient()`, `repeating-conic-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`
* Border images in CSS: A key focus area for Interop 2023 on MDN blog (2023)