border-image-repeating-radial-gradient-slice-fill-1.html (585B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: radial-gradient with border-image-slice and fill</title> 5 <style> 6 div { 7 border: 30px solid black; 8 border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); 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>