CSS border image is used to set the images for borders.
Syntax
|
1 |
border-image: specify image location here; |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .div-border{ border-image: url(../../images/myborder.png) 14 round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show the border image.</p> </div> |
Output
This is the paragraph to show the border image.
CSS border image values list
| Sr. No. | value | Description |
|---|---|---|
| 1 | border-source | Used to give the location of image to display for border. The value for this will be the location of the image. See the property CSS border image source for more details. |
| 2 | border-slice | Used to give the slice the image to display for border. To see what value should be use for this, see This property CSS border image slice. |
| 3 | border-width | Used to specify the width the image to display for border. See the property CSS border image width for more details |
| 4 | border-outset | Used to specify the border image area to extend beyond the box area. See the property CSS border image outset for more details |
| 5 | border-repeat | Used to specify the border image to be repeated, round, stretch etc. See the property CSS border image repeat for more details |
| 6 | initial | Used to define as the property initial value. |
| 7 | inherit | Used to define the computed value of property on the elements parent. |