svg-as-border-image-4b.html (684B)
1 <html> 2 <head> 3 <title>test of svg-as-border-image</title> 4 <style type="text/css"> 5 div { 6 width: 100px; 7 height: 100px; 8 margin: 30px; 9 border-width: 30px; 10 border-style: solid; 11 transform: translate(100px, 200px); 12 } 13 #border5p { 14 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; 15 } 16 #border25p { 17 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch; 18 } 19 </style> 20 </head> 21 <body style="transform: translate(-100px, -200px);"> 22 <div id="border5p"></div> 23 <div id="border25p"></div> 24 </body> 25 </html>