Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS border-image-source
The CSS border-image-source property is used to specify the path of an image to be used as a border. This property defines the source image that will be sliced and used to create decorative borders around elements.
Syntax
selector {
border-image-source: value;
}
Possible Values
| Value | Description |
|---|---|
url() |
Specifies the path to an image file |
none |
No image is used (default value) |
linear-gradient() |
Uses a gradient as the border image source |
Example
The following example demonstrates how to use an image as a border source −
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 20px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
width: 300px;
text-align: center;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<p id="borderimg1">This is an image border example.</p>
</body>
</html>
A paragraph with decorative image-based borders appears. The border uses the specified image pattern, repeated around all four sides of the element.
Key Points
- The
border-image-sourceproperty works in conjunction with other border-image properties likeborder-image-sliceandborder-image-repeat - You must set a
borderproperty for the image border to be visible - The image is automatically sliced into nine sections to fit around the element
Conclusion
The border-image-source property allows you to create visually appealing decorative borders using images. Combined with other border-image properties, it provides flexible control over how images are applied as borders.
Updated on: 2026-03-15T12:00:23+05:30
125 Views
Advertisements