461512-1.html (1565B)
1 <html> 2 <head> 3 <style type="text/css"> 4 body { background-color: white; margin: 0; padding: 0; } 5 p { 6 margin: 10px; 7 padding: 0; 8 border: 10px solid rgba(200, 160, 120, 0.5); 9 height: 10px; 10 } 11 12 /** 13 * XXX we cannot test the corner by this testing because when the corner 14 * is joined with anti-aliased, the edge isn't matching with the 15 * reference. The dashed and dotted line's anti-aliasing are same. 16 */ 17 18 /* Cover the coners by the white div element */ 19 div { 20 position: absolute; 21 width: 10px; 22 height: 10px; 23 background-color: white; 24 } 25 div.tr { 26 right: 10px; 27 } 28 div.tl { 29 left: 10px; 30 } 31 div.bl { 32 left: 10px; 33 margin-top: 20px; 34 } 35 div.br { 36 right: 10px; 37 margin-top: 20px; 38 } 39 </style> 40 </head> 41 <body> 42 <p style="border-style: solid;"> </p> 43 <!-- <p style="border-style: dashed;"> </p> --> 44 <!-- <p style="border-style: dotted;"> </p> --> 45 <p style="border-style: double;"> </p> 46 <div class="tr"></div> 47 <div class="bl"></div> 48 <p style="border-style: ridge;"> </p> 49 <div class="tr"></div> 50 <div class="bl"></div> 51 <p style="border-style: groove;"> </p> 52 <div class="tr"></div> 53 <div class="bl"></div> 54 <p style="border-style: inset;"> </p> 55 <div class="tr"></div> 56 <div class="bl"></div> 57 <p style="border-style: outset;"> </p> 58 </body> 59 </html>