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 property
The CSS border-image property allows you to use an image as the border of an element instead of the standard border styles. This property is useful for creating decorative borders using custom images.
Syntax
selector {
border-image: source slice width outset repeat;
}
Possible Values
| Property | Description |
|---|---|
source |
The image to be used as border (url or gradient) |
slice |
How to slice the border image (in pixels or %) |
width |
The width of the border image |
outset |
How much the border extends beyond the border box |
repeat |
How border image is repeated (stretch, repeat, round, space) |
Example: Basic Border Image
The following example demonstrates how to apply an image border using the border-image property −
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
width: 300px;
padding: 20px;
border: 15px solid transparent;
border-image: url(/css/images/border.png) 30 round;
margin: 20px;
text-align: center;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<p id="borderimg1">This is an image border example.</p>
</body>
</html>
A paragraph with a decorative image border appears. The border uses a custom image pattern that repeats around all four sides of the element.
Example: Different Repeat Values
This example shows different repeat behaviors for the border image −
<!DOCTYPE html>
<html>
<head>
<style>
.border-example {
width: 200px;
padding: 15px;
margin: 10px;
border: 10px solid transparent;
text-align: center;
background-color: #f0f0f0;
}
.round {
border-image: url(/css/images/border.png) 30 round;
}
.stretch {
border-image: url(/css/images/border.png) 30 stretch;
}
.repeat {
border-image: url(/css/images/border.png) 30 repeat;
}
</style>
</head>
<body>
<div class="border-example round">Round Border</div>
<div class="border-example stretch">Stretch Border</div>
<div class="border-example repeat">Repeat Border</div>
</body>
</html>
Three boxes appear with different border image behaviors: "Round" adjusts the image to fit, "Stretch" stretches the image, and "Repeat" tiles the image pattern.
Conclusion
The border-image property provides a powerful way to create decorative borders using custom images. Remember to set border: solid transparent first to define the border area where the image will be applied.
Updated on: 2026-03-15T11:57:37+05:30
109 Views
Advertisements