Loading lesson path
Overview
Formula
border - image property, you can define an image to be used as the border around an element.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.
Formula
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 - widthFormula
For border - image to work, the element also needs the border property set!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): An image as the border!
#borderimg
{
border: 10px solid transparent; /* Required for border-image */
padding: 15px;Formula
border - image: url(border.png)30 round;
}Here, the stretch value specifies that the middle section of the image is stretched to fill the area: An image as the border!
#borderimg
{
border: 10px solid transparent; /* Required for border-image */
padding: 15px;Formula
border - image: url(border.png)30 stretch;
}Formula
CSS border - image - Different Slice ValuesDifferent slice values completely changes the look of the border image:
border-image: url(border.png) 50 round;border-image: url(border.png) 20% round;border-image: url(border.png) 30% round;#borderimg1 {
border: 10px solid transparent;
padding: 15px;Formula
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;Formula
border - image: url(border.png)30% round;
}Formula
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 - repeatSpecifies whether the border image should be repeated, rounded or stretched