The CSS border-image-source property sets the source image for creating an element's border image.
The border-image-source property is one of the CSS3 properties.
If the value is set to "none", or if the image cannot be displayed, the border styles will be used.
| Initial Value | none |
| Applies to | All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.borderImageSource = "url()"; |
Syntax
border-image-source: none | image | initial | inherit;Example of the border-image-source property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 15;
}
</style>
</head>
<body>
<h2>Border-image-source property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%">
</body>
</html>Result
Values
| Value | Description |
|---|---|
| none | No image will be applied. |
| image | The path to the image is applied as a border. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Browser support
|
|
|
|
|
|---|---|---|---|---|
| 15.0+ | 12.0+ | 15.0+ | 6.0+ | 15.0+ |
Practice Your Knowledge
What is the correct usage of the border-image-source property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.