| <!DOCTYPE html> |
| <style> |
| table { border-collapse: collapse; } |
| td { width: 30px; height: 30px; } |
| .t1 { border-top: 10px solid green } |
| .t2 { border-top: 20px solid blue } |
| .t3 { border-top: 30px solid red } |
| .t4 { border-top: 40px solid yellow } |
| .r1 { border-right: 10px solid green } |
| .r2 { border-right: 20px solid blue } |
| .r3 { border-right: 30px solid red } |
| .r4 { border-right: 40px solid yellow } |
| .b1 { border-bottom: 10px solid green } |
| .b2 { border-bottom: 20px solid blue } |
| .b3 { border-bottom: 30px solid red } |
| .b4 { border-bottom: 40px solid yellow } |
| .l1 { border-left: 10px solid green } |
| .l2 { border-left: 20px solid blue } |
| .l3 { border-left: 30px solid red } |
| .l4 { border-left: 40px solid yellow } |
| </style> |
| <table> |
| <tr> |
| <td class="t3 r2 b3 l1"></td> |
| <td class="t1 r4 b1 l2"></td> |
| <td class="t2 r3 b1 l4"></td> |
| <td class="t4 r1 b4 l3"></td> |
| <td class="t2 r1 b2 l1"></td> |
| <td class="t3 r2 b3 l1"></td> |
| <td class="t4 r2 b3 l2"></td> |
| </tr> |
| <tr> |
| <td class="t3 r4 b3 l4"></td> |
| <td class="t1 r1 b2 l4"></td> |
| <td class="t1 r2 b3 l1"></td> |
| <td class="t4 r3 b4 l2"></td> |
| <td class="t2 r4 b1 l3"></td> |
| <td class="t3 r1 b2 l4"></td> |
| <td class="t3 r1 b2 l1"></td> |
| </tr> |
| <tr> |
| <td class="t3 r1 b4 l2"></td> |
| <td class="t2 r4 b3 l1"></td> |
| <td class="t3 r1 b2 l4"></td> |
| <td class="t4 r2 b4 l1"></td> |
| <td class="t1 r3 b1 l2"></td> |
| <td class="t2 r3 b2 l3"></td> |
| <td class="t2 r3 b4 l3"></td> |
| </tr> |
| <tr> |
| <td class="t4 r2 b1 l3"></td> |
| <td class="t3 r1 b3 l2"></td> |
| <td class="t2 r3 b4 l1"></td> |
| <td class="t4 r3 b2 l3"></td> |
| <td class="t1 r4 b1 l3"></td> |
| <td class="t2 r1 b3 l4"></td> |
| <td class="t4 r2 b1 l1"></td> |
| </tr> |
| <tr> |
| <td class="t1 r4 b3 l2"></td> |
| <td class="t3 r2 b1 l4"></td> |
| <td class="t4 r1 b3 l2"></td> |
| <td class="t2 r4 b2 l1"></td> |
| <td class="t1 r2 b1 l4"></td> |
| <td class="t3 r2 b4 l2"></td> |
| <td class="t1 r4 b3 l2"></td> |
| </tr> |
| <tr> |
| <td class="t3 r2 b4 l1"></td> |
| <td class="t1 r4 b3 l2"></td> |
| <td class="t3 r4 b1 l4"></td> |
| <td class="t2 r3 b2 l4"></td> |
| <td class="t1 r3 b4 l3"></td> |
| <td class="t4 r1 b2 l3"></td> |
| <td class="t3 r2 b4 l1"></td> |
| </tr> |
| </table> |
| |
