percent-1-ref.html (1666B)
1 <!doctype html> 2 <html><head><title>Border radius with percent units — reference</title> 3 <style> 4 div { background: green; } 5 .r1 { height: 20px; } .c1 { width: 20px; } 6 .r2 { height: 40px; } .c2 { width: 40px; } 7 .r3 { height: 60px; } .c3 { width: 60px; } 8 .r4 { height: 80px; } .c4 { width: 80px; } 9 10 .r1.c1 { border-radius: 5px / 5px; } 11 .r1.c2 { border-radius: 10px / 5px; } 12 .r1.c3 { border-radius: 15px / 5px; } 13 .r1.c4 { border-radius: 20px / 5px; } 14 .r2.c1 { border-radius: 5px / 10px; } 15 .r2.c2 { border-radius: 10px / 10px; } 16 .r2.c3 { border-radius: 15px / 10px; } 17 .r2.c4 { border-radius: 20px / 10px; } 18 .r3.c1 { border-radius: 5px / 15px; } 19 .r3.c2 { border-radius: 10px / 15px; } 20 .r3.c3 { border-radius: 15px / 15px; } 21 .r3.c4 { border-radius: 20px / 15px; } 22 .r4.c1 { border-radius: 5px / 20px; } 23 .r4.c2 { border-radius: 10px / 20px; } 24 .r4.c3 { border-radius: 15px / 20px; } 25 .r4.c4 { border-radius: 20px / 20px; } 26 27 </style> 28 </head><body> 29 <table> 30 <tr> 31 <td><div class="r1 c1"></div></td> 32 <td><div class="r1 c2"></div></td> 33 <td><div class="r1 c3"></div></td> 34 <td><div class="r1 c4"></div></td> 35 </tr> 36 <tr> 37 <td><div class="r2 c1"></div></td> 38 <td><div class="r2 c2"></div></td> 39 <td><div class="r2 c3"></div></td> 40 <td><div class="r2 c4"></div></td> 41 </tr> 42 <tr> 43 <td><div class="r3 c1"></div></td> 44 <td><div class="r3 c2"></div></td> 45 <td><div class="r3 c3"></div></td> 46 <td><div class="r3 c4"></div></td> 47 </tr> 48 <tr> 49 <td><div class="r4 c1"></div></td> 50 <td><div class="r4 c2"></div></td> 51 <td><div class="r4 c3"></div></td> 52 <td><div class="r4 c4"></div></td> 53 </tr> 54 </table> 55 </body></html>