Prev Demo
CSS3
>
Border-Image-Slice Property
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> </head> <body> <style> #divImgR { border: 12px solid transparent; padding: 12px; border-image-source: url(/HTPictures/Generics/5-635757227429655487.jpg); border-image-repeat: repeat; border-image-slice: 100; } #divImgS { border: 20px solid transparent; padding: 20px; border-image-source: url(/HTPictures/Generics/5-635757227429655487.jpg); border-image-repeat: repeat; border-image-slice: 50%; } #divImgT { border: 10px solid transparent; padding: 10px; border-image-source: url(/HTPictures/Generics/5-635757227429655487.jpg); border-image-repeat: repeat; border-image-slice: 60%; } </style> <p>This is some text.</p> <div id="divImgR"> Border Image slice 100. </div> <br /> <br /> <div id="divImgS"> Border Image slice 50%. </div> <br /> <br /> <div id="divImgT"> Border Image slice 60%. </div> <br /> <br /> <p> <img src="/HTPictures/Generics/5-635757227429655487.jpg" width="100" height="150"/>: This is the orginal Border image.</p> </body> </html>
Note: We DO NOT save your trial code in our database.
Output