border-image-linear-gradient-outset.html (749B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-outset</title> 5 <style> 6 div { 7 border: 30px solid black; 8 width: 90px; 9 height: 90px; 10 margin: 90px; 11 } 12 div.border { 13 border-image: linear-gradient(to bottom right, red, blue); 14 border-image-outset: 0.5 1 2 60px; 15 } 16 div.border30 { 17 border-image: linear-gradient(to bottom right, red, blue); 18 border-image-outset: 0.5 1 2 60px; 19 border-image-slice: 30 30; 20 } 21 div.border1260 { 22 border-image: linear-gradient(to bottom right, red, blue); 23 border-image-outset: 0.5 1 2 60px; 24 border-image-slice: 12 60; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="border"></div> 30 <div class="border30"></div> 31 <div class="border1260"></div> 32 </body> 33 </html>