CSS border-image-source Property

CSS border-image-source

The border-image-source property in CSS specifies the source of the image to be used as the border of an element. This property allows you to use an image file or other graphical resource to create decorative borders for elements.

Syntax of border-image-source

</>

Copy

border-image-source: none | url() | initial | inherit;

Values

Value	Description
`none`	No image is used for the border. This is the default value.
`url()`	Specifies the image to be used as the border. The `url()` function is used to provide the path to the image file.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from its parent element.

Default Value

none

Examples for border-image-source

Using the CSS border-image-source Property

The following examples demonstrate how to use the border-image-source property to apply images as borders.

</>

Copy

/* No image used for the border */
.element {
  border-image-source: none;
}

/* Use an image for the border */
.element {
  border-image-source: url('https://www.example.com/border-image.png');
}

/* Inherit the border image source from the parent */
.element {
  border-image-source: inherit;
}

Example for an Image Border

Below is an example demonstrating how to use border-image-source to apply an image as the border of an element:

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: round;
    border-image-slice: 80;
    border-image-width: 10px;
  }
</style>
</head>
<body>

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

</body>
</html>

Browser Support

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

Browser	Version
Chrome	15.0
Edge	11.0
Firefox	15.0
Safari	6.0
Opera	15.0

TutorialKart

CSS border-image-source Property