CSS border-image

The border-image property in CSS allows you to use an image as the border of an element. This property is shorthand for specifying the source of the image, how the image is sliced, the width of the border, and how the image should behave (repeated, stretched, or rounded).

Syntax of border-image

</>
Copy
border-image: source slice width outset repeat | initial | inherit;

Values

ValueDescription
sourceSpecifies the path to the image to be used as the border.
sliceDefines how the image is sliced into regions (values in percentages or numbers).
widthSets the width of the border (values in pixels, percentages, or auto).
outsetSpecifies the amount by which the border image area extends beyond the border box.
repeatDefines how the image should be repeated. Acceptable values are stretch, repeat, and round.
initialSets the property to its default value.
inheritInherits the value from its parent element.

Default Value

No border image is applied unless explicitly set.

Examples for border-image

Using the CSS border-image Property

The following examples demonstrate how to use the border-image property to apply an image as a border.

</>
Copy
/* Apply a border image with all properties */
.element {
  border-image: url('border.png') 30 30 30 30 stretch;
}

/* Specify only the image source and slice values */
.element {
  border-image: url('border.png') 30;
}

/* Repeat the border image */
.element {
  border-image: url('border.png') 30 repeat;
}

/* Inherit the border image properties */
.element {
  border-image: inherit;
}

Example for a Custom Border Image

Below is an example demonstrating how to use border-image to create a border using an image.

The original border image is:

https://www.tutorialkart.com//img/border-star.png

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: space;
    border-image-slice: 83;
    border-image-width: 28px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-image property is supported in modern browsers. Below is a compatibility table:

BrowserVersion
Chrome16
Edge11
Firefox15
Safari6
Opera15