The border-image-source property is used to specify the image source which is to be set as the border of an element.
Syntax:
border-image-source: url(image-path.png)| none| initial| inherit;
Note: If the value is none, the border styles will be used. The specified image can be divided into regions with the help of border-image-slice property.
Default Value: Its default value is none.
Values:
- none: No image is specified.
- image: Used to specify the path of the image to be used as the border of an element.
- initial: Initializes the property with it’s default value.
- inherit: It takes the value from the parent element.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-image-source Property
</title>
<style>
body {
text-align: center;
color: green;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
border-image-repeat: round;
border-image-slice: 50;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>border-image-source property</h2>
<div class="border1">GEEKSFORGEEKS</div>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by CSS | border-image-source Property are listed below:
- Chrome 15.0
- Edge 12.0
- Firefox 15.0
- Internet Explorer 11.0
- Opera 15.0
- Safari 6.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Jun, 2023
Like Article
Save Article