CODEWITHSUNDEEP
htmlcssbordercss-tables
Trent Scott
Trent Scott

Reputation: 2028

Border-Radius on Corners of Table Not Working

I have an email template here that has CSS styling applied to make the edges rounded.

I want the top left, top right, bottom left, and bottom right outer corners to be rounded. All internal table edges/corners should be square.

You can see, though, that it's rounding the internal edges, too:

Header:

enter image description here

Footer:

enter image description here

How should I modify my CSS to ONLY round outside edges/corners?

table {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child th: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;
}

Upvotes: 0

Views: 12900

Answers (3)

painotpi
painotpi

Reputation: 6996

Use the shorthand, so,

For Header (#templateHeader),

border-radius: 5px 5px 0 0; /*top-left top-right bottom-right bottom-left*/

enter image description here

For Footer (#templateFooter),

border-radius: 0 0 5px 5px;

enter image description here

Upvotes: 2

Justin McDonald
Justin McDonald

Reputation: 2166

you are applying the border-radius to td element, in order to see the rounded border based on your DOM organization, you must apply the border-radius to the table element.

Upvotes: 2

Justin McDonald
Justin McDonald

Reputation: 2166

nothing. the border-radius property is not supported by Internet Explorer.

Upvotes: 0

Related Questions