How to repeat border image using CSS ?
You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border.
Syntax:
border-image-repeat: stretch|repeat|round|initial|inherit
Note: The border-image-slice property is used to divide or slice an image specified by the border-image-source property.
Example 1: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> < html > < head > <!-- CSS property --> < style > h1 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: stretch; border-image-slice: 40; text-align: center; } h2 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: round; border-image-slice: 50; text-align: center; } </ style > </ head > < body > < h1 >border-image-repeat:stretch</ h1 > < h2 >border-image-repeat:round</ h2 > </ body > </ html > |
Output:
Example 2: Here is an example of border-image repeat: space property.
HTML
<!DOCTYPE html> < html > < head > <!-- CSS property --> < style > h1 { color: green; text-align: center; } h2 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: repeat; border-image-slice: 40; text-align: center; } h3 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border1-2.png); border-image-repeat: space; border-image-slice: 50; text-align: center; } </ style > </ head > < body > < h1 >Welcome to w3wiki</ h1 > < h2 >border-image-repeat: repeat</ h2 > < h3 >border-image-repeat: space</ h3 > </ body > </ html > |
Output:
Note: The border-image-repeat property has a one-value syntax that describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
Example 3: Here is another example of border-image repeat property.
HTML
<!DOCTYPE html> < html > < head > <!-- CSS property --> < style > h1 { color: green; text-align: center; } h2 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.w3wiki.net/wp-content/uploads/border2-2.png); border-image-repeat: repeat round; border-image-slice: 40; text-align: center; } </ style > </ head > < body > < h1 >Welcome to w3wiki</ h1 > < h2 >border-image-repeat: repeat round</ h2 > </ body > </ html > |
Output: