CSS border image repeat is used to define whether the border images are repeat, round or stretch.
Syntax
|
1 |
border-image-repeat: specify reapeat value here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .div-border{ border-image-source: url(../../images/myborder.png); border-image-slice: 14; border-image-width: 0.5em 0.87em; border-image-outset: 0em 0.9em 1.2em 0.9em; border-image-repeat: round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph inside the div with repeated border image.</p> </div> |
Output
This is the paragraph inside the div with repeated border image.
CSS border image repeat values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | stretch | Used to specify the border image to stretch and fit the block area. |
| 2 | repeat | Used to specify the border image to repeat and fit the block area. |
| 3 | round | Used to specify the border image to stretch and fit the block area. If it not fit the block after stretch then it get rescaled to fit the area. |
| 4 | space | Used to specify the border image to stretch and fit the block area. If it not fit the block after stretch then extra space is distributed aroun the block area. |
| 5 | initial | Used to define as the property initial value. |
| 6 | inherit | Used to define the computed value of property on the elements parent. |
| 7 | unset | Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not. |