border-image-linear-gradient-repeat-round-3.html (657B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-repeat</title> 5 <style> 6 div { 7 border: 30px solid black; 8 border-image: linear-gradient(to bottom right, red, blue); 9 width: 180px; 10 height: 180px; 11 } 12 div.border40round { 13 border-image-repeat: round; 14 border-image-slice: 40 fill; 15 } 16 div.border45round { 17 border-image-repeat: round; 18 border-image-slice: 45 fill; 19 } 20 div.border75round { 21 border-image-repeat: round; 22 border-image-slice: 75 fill; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="border40round"></div> 28 <div class="border45round"></div> 29 <div class="border75round"></div> 30 </body> 31 </html>