Flash cards
Review the key moves
What is the main idea behind CSS Border Images?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
#___ {Put the learning moves in the order that makes the concept easiest to apply.
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 image
- border-image-slice - defines how to slice the image
- border-image-width - defines the width of the image
- border-image-outset defines the amount by which the border image area extends beyond the border box
- border-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 - Different Slice Values
Different slice values completely changes the look of the border image:
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;
}Live preview
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 |