css property

`border-image-source` CSS property

The border-image-source CSS property sets the source image used to create an element’s border image.

The border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.

Interactive exampleOpen the canonical MDN source to run this embedded demo.

border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

border-image-source: url("/shared-assets/images/examples/border-stars.png");

border-image-source: repeating-linear-gradient(
  45deg,
  transparent,
  #4d9f0c 20px
);

border-image-source: none;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url("image.jpg");
border-image-source: linear-gradient(to top, red, yellow);

/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;

Values

none
- : No border image is used. The appearance defined by border-style is displayed instead.
image
- : Image reference to use for the border.

Formal definition

Formal syntax

Examples

Basic example

.box {
  border-image-source: url("image.png");
}

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.