Page Stats
Visitor: 381
CSS3 Border image property is used to apply image on the border of the Html element instead of the normal border. Image on Border can be apply using css3 border-image property.
The property has three parts:
1. The image to use as the border.
2. Where to slice the image.
3. Define whether the image should be repeated or stretched.
Property | Description |
---|---|
border-image | Use to specify an image in a border border-image: url(img.png) 30 round; |
border-image-source | specifies the path to the image to be used as a border border-image-source: url(border.png); |
border-image-slice | specifies how to slice the image The border-image-slice property can take from one to four values. border-image-slice: 30; border-image-slice: 30 fill; |
border-image-width | The border-image-width property specifies the width of the border image. border-image-width: 10px; |
border-image-outset | specifies the amount by which the border image area extends. The border-image-outset property can take from one to four values. border-image-outset: 10px; |
border-image-repeat | Whether the border image should be repeat, round or stretch. Default is stretch border-image-repeat: repeat; |
Example 1: Border-Image
Image use as a Border:
Example 2: Border-Image
Image use as a Border:
Example 3: Border-Image
Image use as a Border:
Exercise 1:
Image use as a Border:
Exercise 2:
Image use as a Border: