How to repeat border image using CSS ? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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|inheritNote: 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.geeksforgeeks.org/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.geeksforgeeks.org/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.geeksforgeeks.org/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.geeksforgeeks.org/wp-content/uploads/border1-2.png); 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> <!-- CSS property --> <style> h1 { color: green; text-align: center; } h2 { border: 40px solid transparent; padding: 40px; border-image-source: url( https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 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: Comment More infoAdvertise with us Next Article How to repeat border image using CSS ? aksrathod07 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to add image refaction using CSS ? This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mi 2 min read How to make rounded corner using CSS ? Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded. In this article, we will explore how to use the border-radius pr 3 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read How to Add an Iframe Border using CSS ? This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<!-- CSS border to the iframe --><style> iframe { bord 1 min read How to specify the width of the border image using CSS? In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property. The border-image-width property is used to set the width of the border-image. It can be set by providing multiple values. If only one value is provided, 2 min read How to Set Border Width in CSS? The CSS border-width property is used to set the border of an element. This property allows you to specify the width of the border for all four sides of an element or individually for each side. Here, we will cover all possible approaches with detailed explanations and code examples. Table of Conten 3 min read How to Animate SVG with border-image using CSS ? Scalable Vector Graphics or SVG is used to set vector-based graphics for the web. In this article, we will learn how to animate an SVG with border-image using CSS.Approach: Using the border-image property, there is an SVG element within which a rect element is defined to represent a rectangle of a s 3 min read CSS border-image-slice Property In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property. The border-slice property divides a given image into: 9 regions4 corners4 edgesA middle region.Note: The middle region remains transparent as default and fill value is used to make i 3 min read How to set multiple background images using CSS? The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr 2 min read CSS border-image-source Property The border-image-source property is used to specify the image source to be set as the border of an element. Syntax: border-image-source: url(image-path.png)| none| initial| inherit;Note: If the value is none, the border styles will be used. The specified image can be divided into regions with the he 2 min read Like