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 >
< style >
h1 {
border: 40px solid transparent;
padding: 40px;
border-image-source: url(
border-image-repeat: stretch;
border-image-slice: 40;
text-align: center;
}
h2 {
border: 40px solid transparent;
padding: 40px;
border-image-source: url(
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 >
< style >
h1 {
color: green;
text-align: center;
}
h2 {
border: 40px solid transparent;
padding: 40px;
border-image-source: url(
border-image-repeat: repeat;
border-image-slice: 40;
text-align: center;
}
h3 {
border: 40px solid transparent;
padding: 40px;
border-image-source: url(
border-image-repeat: space;
border-image-slice: 50;
text-align: center;
}
</ style >
</ head >
< body >
< h1 >Welcome to GeeksforGeeks</ 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 >
< style >
h1 {
color: green;
text-align: center;
}
h2 {
border: 40px solid transparent;
padding: 40px;
border-image-source: url(
border-image-repeat: repeat round;
border-image-slice: 40;
text-align: center;
}
</ style >
</ head >
< body >
< h1 >Welcome to GeeksforGeeks</ h1 >
< h2 >border-image-repeat: repeat round</ h2 >
</ body >
</ html >
|
Output:
Last Updated :
22 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...