Here is the code sample I made:
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
table {
-webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
background-color:#ACE34D; padding:8px;
}
td {
border: thin solid; padding-left:2em; padding-right:2em;
-webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
}
--></style>
</head>
<body>
<table>
<tr><td>Some data</td><td>More data</td><td> … </td></tr>
<tr><td>Some data</td><td>More data</td><td> … </td></tr>
</table>
</body>
</html>
It works, tested.
I did it with the help of this rounded corner generator:
http://cssround.com/[
^], added my own styles to make it look acceptable, without intersections of the borders and with proper padding.
See also:
http://www.css3.info/preview/rounded-border/[
^],
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers[
^].
The trick is to meet the requirements of different layout engines at once.
—SA