Rounded Edges via CSS to a Table

Question

I'm working on an HTML/CSS email template and want to add border-radius of 3px to the outer table/container.

Here is the page . I tried adding it as a style to table td {} but it didn't work. Is there another element I should target?

Answer 1

It's relatively easy using pseudo selectors.

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child td:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child td:last-child{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
/* Bottom Left */
table tr:last-child td:first-child{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
/* Bottom Right */
table tr:last-child td:last-child{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

Answer 2

This depends on a number of factors, namely:

• Browser (FF,Chrome, IE etc)
• Platform (PC/Desktop/mobile etc)
• CSS level

However, generally, you can't style an individual table element like <tr> or <td> .

What you can do is:

 table {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
 }

For tables and other elements...

Tables have to be treated as a whole. But you can apply the above to <span> , <div> etc.

For IE (which, historically usually causes numerous CSS issues due to a lack of standardisation), you can use conditional CSS as an addition to your main CSS elements:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-css.css" />
<![endif]-->

Answer 3

If you want to do that with less code, you could just add "overflow hidden to the table element like so:

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
    overflow: hidden;
}

That way you wouldn't need all the pseudo-selectors