Border-Radius on Corners of Table Not Working

ariffantasi

New Member
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:
j1tuv.png
Footer:
pGsNr.png
How should I modify my CSS to ONLY round outside edges/corners?\[code\]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;}\[/code\]
 
Back
Top