Rounded corner div using tables
After spending some time googling the approach to create rounded corner, I can not find any method that can extend horizontally and vertically without limitation. Therefore I start to create my own using tables and css. The following is the html/css that works in FF 3.0, Chrome 4.0 and IE7. table.padded-table { border-collapse: collapse; width:100%; } table.padded-table tr, td { padding:0px; spacing:0px; } td.td1,td.td3, td.td7, td.td9 { width:5px; height:5px; } td.td1 { background: url(topleft.png) no-repeat right top; } td.td3 { background: url(topright.png) no-repeat right top; } td.td7 { background: url(bottomleft.png) no-repeat right top; } td.td9 { background: url(bottomright.png) no-repeat right top; } td.td1,td.td2,td.td3, td.td4 , td.td5 , td.td6 , td.td7, td.td8 , td.td9 { background-color:#BCFFBC; } td.td2 { border-top: solid 1px #cccccc; } td.td4 { border-left: solid 1px #cccccc; } td.td6 { border-right: solid...