CSS Border Images
CSS border-image Property
You can choose an image to be used in place of an element’s default border by using the CSS border-image property.
There are three components to the property:
- The picture that will be the border
- Where to cut the picture
- Decide if the middle portions should be stretched or repeated.
The following picture (known as “border.png”) will be used:
The border-image property takes the image and slices it into nine sections, The corners are then placed where you specified, and the intermediate sections are either stretched or repeated.
Note: The element must also have the border property set in order for border-image to function!
Here, the border is created by repeating the image’s central sections:
Here is the code:
Example
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
Here, the border is created by stretching the image’s main sections:
Here is the code:
Example
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
Advice: The border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat attributes are all essentially shortened to the border-image property.
CSS border-image - Different Slice Values
The border’s appearance drastically varies with different slice values:
Here is the code:
Example
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
CSS Border Image Properties
| Property | Description |
|---|---|
| border-image | A shorthand property for setting all the border-image-* properties |
| border-image-source | Specifies the path to the image to be used as a border |
| border-image-slice | Specifies how to slice the border image |
| border-image-width | Specifies the widths of the border image |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |
