Rounded Corner Table Style for newsletter - html

Question

I've got a news letter program that has a table with a border but I'm trying to make the border have rounded edges. For some reason when I add in "border-radius: 20px;" it doesn't work.
<table style="border-radius: 20px; order-color: #000000; border-width: 1px; width: 680px;" border="1" cellpadding="5" rules="none" align="center">
I cant have a separate style sheet. It just shows a standard square border. Maybe Im doing it wrong, Im not great at html.

Answer 1

By default, table is set to display: table;. Change that to display: block; and add border-collapse: seperate;
example:
<table style="border-radius: 20px; border-color: #000000; border-width: 1px; width: 680px; display: block; border-collapse: separate;" border="1" cellpadding="5" rules="none" align="center">
jsfiddle: http://jsfiddle.net/57we8/

Answer 2

Try this in your css:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
And then then consider including PIE.htc (http://css3pie.com/) or something similar for IE:
*behavior:url(PIE.htc); /* shows in IE7 and below */
_behavior:url(PIE.htc); /* shows in IE6 and below */

Answer 3

try this css
body {
margin: 30px;
}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}