border-image

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

/* 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;

The border-image property may be specified with anywhere from one to five of the values listed below.

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

Formal syntax

<'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:

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.

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

  border-image:
      url("https://udn.realityripple.com/samples/2c/fa0192d18e.png")  /* source */
      27 /                    /* slice */
      36px 28px 18px 8px /    /* width */
      18px 14px 9px 4px       /* outset */
      round;                  /* repeat */
}

Result

Gradient

HTML

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

CSS

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

Result

Specifications

Browser compatibility

See also

• border
• outline
• box-shadow
• background-image
• url() function
• Gradient functions: conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()