border-dotted-radius-zero.html (758B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>dashed border with radius</title> 6 <style> 7 .box { 8 position: relative; 9 width: 220px; 10 height: 220px; 11 } 12 .mask { 13 position: absolute; 14 top: 0px; 15 left: 0px; 16 width: 220px; 17 height: 220px; 18 } 19 20 div.border { 21 border-style: dotted; 22 border-width: 4px 0 4px 0px; 23 width: 200px; 24 height: 200px; 25 border-top-right-radius: 40px 200px; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="box"> 31 <div class="border"> 32 </div> 33 <img class="mask" src="border-dotted-radius-zero-filled-mask.png"> 34 </div> 35 <div class="box"> 36 <div class="border"> 37 </div> 38 <img class="mask" src="border-dotted-radius-zero-unfilled-mask.png"> 39 </div> 40 </body> 41 </html>