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