CSS Border Images
CSS Border Images
With the CSS
border-image
property, you can
define an image to be used as the border around an element.
CSS border-image Property
The border-image
property allows you to
define an image to be used as the border around an element, instead of the normal border.
This property takes an image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.
The border-image
property is a shorthand property for the
following properties:
border-image-source
- defines the path to the imageborder-image-slice
- defines how to slice the imageborder-image-width
- defines the width of the imageborder-image-outset
defines the amount by which the border image area extends beyond the border boxborder-image-repeat
- defines how to repeat the image
Note: For border-image
to work, the element also needs the
border
property set!
CSS border-image Examples
We will use the following image (named "border.png"):
In the following example, the url(border.png) specifies the source image, the
number 30 slices the image 30 pixels from each edge, and the
round
value specifies that the middle section of the image is tiled (repeated) to fill the area (and rescaled to fit, if needed):
Here is the code:
Example
#borderimg
{
border: 10px solid transparent; /* Required
for border-image */
padding: 15px;
border-image: url(border.png)
30 round;
}
Try it Yourself »
Here, the stretch
value specifies that the middle section of the image is stretched to fill the area:
Here is the code:
Example
#borderimg
{
border: 10px solid transparent; /*
Required for border-image */
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Try it Yourself »
CSS border-image - Different Slice Values
Different slice values completely changes the look of the border image:
Example 1:
Example 2:
Example 3:
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;
}
Try it Yourself »
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 |