border-image-repeating-radial-gradient-repeat-round-2.html (726B)
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: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); 9 width: 180px; 10 height: 180px; 11 } 12 div.border60round { 13 border-image-repeat: round; 14 border-image-slice: 60; 15 } 16 div.border60fillround { 17 border-image-repeat: round; 18 border-image-slice: 60 fill; 19 } 20 div.border30fill2round { 21 border-image-repeat: round; 22 border-image-slice: 30 fill; 23 border-image-width: 2; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="border60round"></div> 29 <div class="border60fillround"></div> 30 <div class="border30fill2round"></div> 31 </body> 32 </html>