corner-joins-2.xhtml (795B)
1 <?xml version="1.0"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>border</title> 5 <style type="text/css"> 6 7 body { 8 filter: url('../filters.svg#NonWhiteToBlack'); 9 } 10 11 body > div { 12 /* filter doesn't change alpha */ 13 background: white; 14 } 15 16 div.test { 17 width: 144px; 18 height: 86px; 19 border-radius: 72px; 20 border-top: 28px solid; 21 border-bottom: 28px solid; 22 background: cyan; 23 margin-bottom: 20px; 24 border-color: blue; 25 border-left: 5px solid red; 26 border-right: 5px solid red; 27 } 28 29 </style> 30 </head> 31 <body> 32 <div> 33 <div class="test"></div> 34 </div> 35 <svg xmlns="http://www.w3.org/2000/svg" 36 xmlns:xlink="http://www.w3.org/1999/xlink" 37 version="1.1"> 38 <!-- use an empty g to force filters.svg to load before onload --> 39 <use xlink:href="../filters.svg#empty" /> 40 </svg> 41 </body> 42 </html>