My Experiences – Manoj Goure

Getting curve for table corner in HTML is quite tedious task. There is no HTML tag for making curved corner for table. The only solution is to get image as a curve. That’s the reason I always avoid tables in my layouts. I don’t like to increase unnecessary HTTPs requests on my webpages.

Once I got myself into a situation where I cannot do away with table. I had to use the tables and with curved border only. Getting this done with Divs and CSS is quite possible but tables are little headache to play with in such condition.

With little tweaking in the code I achieved easily without using images. (This won’t work in IE. IE9 may support it.)

Examples of tables with curved border:

The code for above table is

<table width=”200″ style=”background:#CCC;border:1px #333 solid;text-align:center;” class=”curve_b”>
<tr>
<td>Name</td><td>ID</td>
</tr>
<tr>
<td>Steve</td><td>Peter</td>
</tr>
<tr>
<td>0123</td><td>0124</td>
</tr>
</table>

The curve effect is being generated by class “curve_b” included in table (red color).  And CSS style code for the class is

.curve_b {
    border-radius:10px;
    -webkit-border-radius:10px;
}

Getting curve for tables having cell border need little extra coding. We need to define separate classes to each cell which has to be curved. See sample code below

a) Table with Cellspacing

<table width=”200″ style=”background:#CCC;border:1px #333 solid;text-align:center;”>
<tr>
<td class=”curve_tl”>Name</td>
<td class=”curve_tr”>ID</td>
</tr>
<tr>
<td style=”border:1px #333 solid;”>Steve</td>
<td style=”border:1px #333 solid;”>Peter</td>
</tr>
<tr>
<td class=”curve_bl”>0123</td>
<td class=”curve_br”>0124</td>
</tr>
</table>

b) Table without  Cellspacing

<table width=”200″ style=”background:#CCC;border:1px #333 solid;text-align:center;” cellspacing=”0″>
<tr>
<td class=”curve_tl”>Name</td>
<td class=”curve_tr”>ID</td>
</tr>
<tr>
<td style=”border:1px #333 solid;”>Steve</td>
<td style=”border:1px #333 solid;”>Peter</td>
</tr>
<tr>
<td class=”curve_bl”>0123</td>
<td class=”curve_br”>0124</td>
</tr>
</table>

CSS properties creating curve borders for table cells are

.curve_tl {
    border:1px #333 solid;
    border-top-left-radius:10px;    
    -webkit-border-top-left-radius:10px;
}

.curve_tr {
    border:1px #333 solid;    
    border-top-right-radius:10px;    
    -webkit-border-top-right-radius:10px;
}

.curve_bl {
    border:1px #333 solid;    
    border-bottom-left-radius:10px;        
    -webkit-border-bottom-left-radius:10px;
}

.curve_br {
    border:1px #333 solid;    
    border-bottom-right-radius:10px;    
    -webkit-border-bottom-right-radius:10px;
}

Note:

• Firefox, Safari and Opera browsers support “border-radiaus” property, but not Chrome and IE.
• Chrome support “webkit”.
• IE does not support border curve properties.