border-image-linear-gradient-slice-fill-1.html (554B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-slice and fill</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.border12 { 13 border-image-slice: 12 12 fill; 14 } 15 div.border30 { 16 border-image-slice: 30 30 fill; 17 } 18 div.border60 { 19 border-image-slice: 60 60 fill; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="border12"></div> 25 <div class="border30"></div> 26 <div class="border60"></div> 27 </body> 28 </html>