CSS Border Images
The border-image property defined in CSS used to specify the border of an image means that the border will be
decorated with images, therefore, this border-image property creates a border using an image instead of a normal border.
we can say that in other words, the border-image is a shorthand property that let us use CSS gradient an image as
the border of an element. first of all, let’s see that where we can use the border-image property can be applied to any element, but except
internal table elements (such as tr, th, td) when the border-collapse value is set to collapse.
consequently Here, tr represent the table row, th represent the table headings and td represent the table columns,
CSS border images properties cannot be applied on internal table elements.
other properties default to their initial values if they’re not specified, the only required property for the border-image shorthand is border-image-source.
Property Values with an example
I:- border-image-source
|
1 2 3 |
.border_design { border-image-source: url(border-line.png); } |
II:- border-image-slice
|
1 2 3 4 |
.border_design { border-image-source: url(border-line.png); border-image-slice: 18; } |
III:- border-image-width
|
1 2 3 4 5 |
.border_design { border-image-source: url(border-line.png); border-image-slice: 18; border-image-width: 18; } |
IV:- border-image-outset
|
1 2 3 4 5 6 |
.border_design { border-image-source: url(border-line.png); border-image-slice: 18; border-image-width: 18; border-image-outset: 1; } |
V:- border-image-repeat
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> #borderimg { border: 1px solid transparent; padding: 30px; border-image-source: url(border_image.png); border-image-slice: 15; border-image-width: 15; border-image-outset: 1; border-image-repeat: round; } </style> </head> <body> <p id="borderimg">Article paragraph written here with hundread words</p> </body> </html> |
stretchrepeat, roundspace 
therefore, in the above example you can see the output of the example, border-images-properties used to decorates the border border-image-source used for URL image path and other properties which used to decorate the border such asborder-image-slice border-image-width border-image-outset border-image-repeat
VI:-SVG in an Image Source URL
|
1 2 3 |
.border_design { border-image-source: url(border-line.svg); } |
example: CSS Border Images
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> #borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border_image.png) 20% round; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border_image.png) 30% round; } </style> </head> <body> <p id="borderimg2">Article paragraph written here with hundread words</p> <p id="borderimg3">Article paragraph written here with hundread words</p> </body> </html> |
About Author
