.jpeg)
CSS Border Image
- The border-image property is used to set an image as the border of an element.
- It allows developers to create custom and decorative borders using images.
- CSS border-image is a shorthand property for border-image-source, slice, width, repeat, and outset.
- It is commonly used for creative UI designs, cards, frames, and special sections.
What is CSS border-image?
The CSS border-image property allows you to use an image instead of a normal border.
The image is divided into sections and applied around an HTML element.
Using border-image, developers can create unique designs that are not possible with simple border colors and styles.
CSS border-image Syntax
div {
border-image:
url(border.png) 30 round;
}
CSS border-image Properties
border-image-source
Defines the image that will be used as the border.
border-image-slice
Divides the image into sections for creating the border.
border-image-width
Sets the width of the image border.
border-image-repeat
Controls how the border image is repeated.
Using border-image-source
The border-image-source property specifies the image that will be used as a border.
div {
border-image-source:
url(border.png);
}
Using border-image-slice
The border-image-slice property defines how the source image is divided into parts.
.box {
border-image-slice:
30;
}
Using border-image-repeat
The border-image-repeat property controls how the border image is displayed around the element.
div {
border-image-repeat:
round;
}
CSS border-image Repeat Values
stretch
Stretches the image to fill the border area.
repeat
Repeats the image to cover the border area.
round
Repeats the image and adjusts it to fit properly.
space
Adds equal spacing between repeated images.
Complete CSS border-image Example
The following example creates an image border around a box using the border-image shorthand property.
.box {
border:
20px solid transparent;
border-image:
url(border.png) 30 round;
}