|
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> |