Border Radius for each row in a table - html

I am having the table like this and I want to apply style to each row with rounded corner.
<table>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
And I have written the CSS like this.
td
{
border-radius:5px;
border:2px solid red;
}
I am having multiple columns and I want to show the rows in a rounded corner. When I am trying this for a single cell, I can able to achieve. Anyone help me.
Thanks in advance,
Karthick
Actually I want the output like this but there is a gap between each cell in a row. I tried using cell spacing but I cant get.
td { border: solid 1px #000; }
tr td:first-child
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right:none;
}
tr td:last-child
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left:none;
}
/````````````````````\
\..................../
/````````````````````\
\..................../
/````````````````````\
\..................../
My rows want to display like this with solid borders.


you can write like this:
td:first-child{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
}
td:last-child{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
}
td{background:red;}
Check this http://jsfiddle.net/RNWwu/1/


tr {
border-radius:5px;
border:2px solid red;
}
Change one letter, d, to r (td to tr).
Edit: Sorry, you can't apply border to tr. Try this 'hack' instead, borrowed from here:
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-left-radius: 10px; }
tr:last-child td:first-child { border-top-left-radius: 10px; }
tr:last-child td:last-child { border-top-left-radius: 10px; }


you can try something like this...however, you should just use <div> instead of <table>
<style>
table
{
border-collapse:separate;
border-spacing:1px;
}
td
{
background-color:red;
}
td:first-child
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border:2px solid red;
}
td:last-child
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border:2px solid red;
}
</style>
<table>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Related

How can I round table borders without doubling borders or using border-collapse?

I've been trying to use a Stack Ooverflow answer I've found for rounding table's corners:
/*
table {
border-collapse: collapse;
}*/
table, tr, td, th{
border: 1px solid;
text-align: center;
/*padding: 10px;*/
}
table{
border-spacing: 0;
width: 100%;
display: table;
}
table tr:last-child td:first-child, tr:last-child, table {
border-bottom-left-radius: 25px;
}
table tr:last-child td:last-child, tr:last-child, table {
border-bottom-right-radius: 25px;
}
table tr:first-child th:first-child, tr:first-child, table {
border-top-left-radius: 25px;
}
table tr:first-child th:last-child, tr:first-child, table {
border-top-right-radius: 25px;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>
This works fine. But if I uncomment border-collapse, the rounding disappears. If I uncomment padding: 10px, it would double the border:
I need the border-collapse to avoid bold inner borders. I need padding so that text in table cells had distance from its borders. How do I achieve it while having a rounded outer borders?
JSFiddle: https://jsfiddle.net/eszuhvxj/1/

you can remove top and right border on td:
table {
border-collapse: separate;
border:none;
border-spacing: 0;
width: 30em;
--radius-border: 15px;
}
table td, table th {
border: 1px solid;
text-align: center;
padding: 10px;
}
table td {
border-top: none;
}
table tr:last-child td:first-child{
border-bottom-left-radius: var(--radius-border);
}
table tr:last-child td:last-child {
border-bottom-right-radius: var(--radius-border);
}
table tr:first-child th:first-child {
border-top-left-radius: var(--radius-border);
}
table tr:first-child th:last-child {
border-top-right-radius: var(--radius-border);
}
table tr th:not(:last-child),
table tr td:not(:last-child) {
border-right: none;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>

Here is the solution:
table {
border-spacing: 0;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
text-align:center;
}
/* the first 'th' within the first 'tr' of the 'thead': */
tr:first-child th:first-child {
border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
tr:first-child th:last-child {
border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>

How can I have borders around the table row, but not on any inner-cells?

I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/
body {
font-family: sans-serif;
}
#table {
border-spacing: 0.3em;
}
#table td {
border: 2px solid #30c;
border-radius: 0.4em;
padding: 1em;
text-align: center;
}

Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body {
font-family: sans-serif;
}
#table {
border-collapse: collapse;
border-spacing: 0.3em;
}
#table tr {
border: 2px solid blue;
}
#table td {
padding: 1em;
text-align: center;
}
<table id="table">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.
Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.
body {
font-family: sans-serif;
}
#table td {
padding: 1em;
text-align: center;
}
#table tr:first-of-type td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#table tr:last-of-type td {
border-bottom: 2px solid blue;
}
#table tr:first-child td:first-child {
border-left: 2px solid blue;
border-top-left-radius: 10px;
}
#table tr:first-child td:last-child {
border-right: 2px solid blue;
border-top-right-radius: 10px;
}
#table tr:last-child td:first-child {
border-left: 2px solid blue;
border-bottom-left-radius: 10px;
}
#table tr:last-child td:last-child {
border-right: 2px solid blue;
border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Again, this is not ideal.
The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:
.row {
font-family: sans-serif;
border: 2px solid blue;
border-radius: 10px;
}
.row div {
display: inline-block;
text-align: center;
padding: 1em;
width: calc(100% / 3 - (3px + 2em));
}
.row:first-of-type {
margin-bottom: 20px;
}
<div class="row">
<div>this</div>
<div>is</div>
<div>a table</div>
</div>
<div class="row">
<div>with</div>
<div>rounded</div>
<div>cells</div>
</div>

Styling a table with CSS

I have a HTML table like this
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
Now I need to style it something like this...
I tried it with CSS like this :
table td {
padding: 20px 20px;
width: 33%;
vertical-align: top;
border-bottom: 1px dashed #b4b4b4;
border-right: 1px dashed #b4b4b4;
}
But can't get my expecting result. I can't use inline style with this issue.
Hope someone will help me out.
Thank you.

http://jsfiddle.net/pjLFY/
You almost got it right.
You need to set the border to none of td's in last tr, but you only set the border of that row to none.
table tr:last-child td {
border-bottom: none;
}
table td:last-child {
border-right: none;
}

you can achieve it using :last-child so
try using this.
table td:last-child
{
border-right:none;
}
table tr:last-child td
{
border-bottom:none;
}
JS Fiddle Demo

Try this:
table td {
padding: 20px 20px;
width: 33%;
border-bottom: 1px dashed #b4b4b4;
border-right: 1px dashed #b4b4b4;
background: #FFFDDC;
}
table td:last-child {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}

If you don't want to use :last-child, and you know the background color of the page, try adding this:
table {
border-collapse: collapse;
border: 1px solid white;
}

Instead of overriding with none or 0, you can use :last-child with :not like this:
table td {
padding: 20px 20px;
width: 33%;
vertical-align: top;
}
table tr:not(:last-child) td {
border-bottom: 1px dashed #b4b4b4;
}
table td:not(:last-child) {
border-right: 1px dashed #b4b4b4;
}
See jsFiddle.

The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

I am trying to make a table with rounded corners using the CSS border-radius property. The table styles I'm using look something like this:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?
It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.
Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."
Specifying border width to 0 doesn't collapse the table.
Bottom td corners still square after setting cellspacing to zero.
The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.
I'd like to do this without JavaScript.

I figured it out. You just have to use some special selectors.
The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:
table tr:last-child td:first-child {
border: 2px solid orange;
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border: 2px solid green;
border-bottom-right-radius: 10px;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.
A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.
table {
border-collapse: collapse;
border-radius: 30px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #666; /* this draws the table border */
}
td {
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
<tr>
<td>Life is short</td>
<td rowspan="3">and</td>
</tr>
<tr>
<td>Love</td>
</tr>
<tr>
<td>is always over</td>
</tr>
<tr>
<td>In the</td>
<td>Morning</td>
</tr>
</tbody>
</table>

If you want a CSS-only solution (no need to set cellspacing=0 in the HTML) that allows for 1px borders (which you can't do with the border-spacing: 0 solution), I prefer to do the following:
Set a border-right and border-bottom for your table cells (td and th)
Give the cells in the first row a border-top
Give the cells in the first column a border-left
Using the first-child and last-child selectors, round the appropriate corners for the table cells in the four corners.
See a demo here.
Given the following HTML:
SEE example below:
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:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
text-align: left;
border-top: solid 1px #bbb;
}
/* 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;
}
<div>
<table>
<tr>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</div>

Have you tried using table{border-spacing: 0} instead of table{border-collapse: collapse} ???

You'll probably have to put another element around the table and style that with a rounded border.
The working draft specifies that border-radius does not apply to table elements when the value of border-collapse is collapse.

As Ian said, the solution is to nest the table inside a div and set it like that:
.table_wrapper {
border-radius: 5px;
overflow: hidden;
}
With overflow:hidden, the square corners won't bleed through the div.

To the best of my knowledge, the only way you could do it would be to modify all the cells like so:
table td {
border-right-width: 0px;
border-bottom-width: 0px;
}
And then to get the border on the bottom and right back
table tr td:last-child {
border-right-width: 1px;
}
table tr:last-child td {
border-bottom-width: 1px;
}
:last-child is not valid in ie6, but if you are using border-radius I assume you don't care.
EDIT:
After looking at your example page, it appears that you may be able to work around this with cell spacing and padding.
The thick gray borders you are seeing are actually the background of the table (you can see this clearly if you change the border color to red). If you set the cellspacing to zero (or equivalently: td, th { margin:0; }) the grey "borders" will disappear.
EDIT 2:
I can't find a way to do this with only one table. If you change your header row to a nested table, you might possibly be able to get the effect you want, but it'll be more work, and not dynamic.

Here is a way:
div {
border: 2px solid red;
overflow: hidden;
border-radius: 14px;
transform: rotate(0deg);
}
table {
border-spacing: 0;
background-color: blue;
height: 100%;
width: 100%;
}
<div>
<table>
<tr>
<td><br></td>
</tr>
</table>
</div>
Or
div {
...
overflow: hidden;
border-radius: 14px;
position: relative;
z-index: 1;
}

Actually you can add your table inside a div as its wrapper. and then assign these CSS codes to wrapper:
.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}
table {
border-collapse: collapse;
}

I tried a workaround using the pseudo elements :before and :after on the thead th:first-child and thead th:last-child
In combination with wrapping the table with a <div class="radius borderCCC">
table thead th:first-child:before{
content:" ";
position:absolute;
top:-1px;
left:-1px;
width:15px;
height:15px;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{
content:" ";
position:absolute;
top:-1px;
right:-1px;
width:15px;
height:15px;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:0px 5px 0px 0px;
}
see jsFiddle
Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.

The given answers only work when there are no borders around the table, which is very limiting!
I have a macro in SASS to do this, which fully supports external and internal borders, achieving the same styling as border-collapse: collapse without actually specifying it.
Tested in FF/IE8/Safari/Chrome.
Gives nice rounded borders in pure CSS in all browsers but IE8 (degrades gracefully) since IE8 doesn't support border-radius :(
Some older browsers may require vendor prefixes to work with border-radius, so feel free to add those prefixes to your code as necessary.
This answer is not the shortest - but it works.
.roundedTable {
border-radius: 20px / 20px;
border: 1px solid #333333;
border-spacing: 0px;
}
.roundedTable th {
padding: 4px;
background: #ffcc11;
border-left: 1px solid #333333;
}
.roundedTable th:first-child {
border-left: none;
border-top-left-radius: 20px;
}
.roundedTable th:last-child {
border-top-right-radius: 20px;
}
.roundedTable tr td {
border: 1px solid #333333;
border-right: none;
border-bottom: none;
padding: 4px;
}
.roundedTable tr td:first-child {
border-left: none;
}
To apply this style simply change your
<table>
tag to the following:
<table class="roundedTable">
and be sure to include the above CSS styles in your HTML.
Hope this helps.

I just wrote a crazy set of CSS for this that seems to work perfectly:
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table td,
table th {
border-right: 1px solid #CCC;
border-top: 1px solid #CCC;
padding: 3px 5px;
vertical-align: top;
}
table td:first-child,
table th:first-child {
border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
border-top: 0;
}
table thead td,
table th {
background: #EDEDED;
}
/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
<table>
<thead>
<tr>
<th>
Table Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Table Data
</td>
</tr>
</tbody>
</table>
/* end complicated rounded table corners !*/

For a bordered and scrollable table, use this (replace variables, $ starting texts)
If you use thead, tfoot or th, just replace tr:first-child and tr-last-child and td with them.
#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }
HTML:
<div id=table-wrap>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>

I had the same problem.
remove border-collapse entirely and use:
cellspacing="0" cellpadding="0"
in the html document.
example:
<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Solution with border-collapse:separate for table and display:inline-table for tbody and thead.
table {
width: 100%;
border-collapse: separate;
border-spacing: 0px;
background: transparent;
}
table thead {
display: inline-table;
width: 100%;
background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-radius: 7px 7px 0px 0px;
padding: 1px;
padding-bottom: 0;
}
table tbody {
border: 1px solid #ddd;
display: inline-table;
width: 100%;
border-top: none;
}

I am new with HTML and CSS and I was also looking for solution for this, here what I find.
table,th,td {
border: 1px solid black;
border-spacing: 0
}
/* add border-radius to table only*/
table {
border-radius: 25px
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
border-radius: 0 0 25px 0
}
I try it, guess what it works :)

Found this answer after running into the same problem, but found it's pretty simple: just give the table overflow:hidden
No need for a wrapping element. Granted, I don't know if this would have worked 7 years ago when the question was initially asked, but it works now.

I started experiment with "display" and I found that: border-radius, border, margin, padding, in a table are displayed with:
display: inline-table;
For example
table tbody tr {
display: inline-table;
width: 960px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
But we need set a width of every column
tr td.first-column {
width: 100px;
}
tr td.second-column {
width: 860px;
}

Here is a recent example of how to implement a table with rounded-corners from http://medialoot.com/preview/css-ui-kit/demo.html. It's based on the special selectors suggested by Joel Potter above. As you can see, it also includes some magic to make IE a little happy. It includes some extra styles to alternate the color of the rows:
table-wrapper {
width: 460px;
background: #E0E0E0;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
padding: 8px;
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-webkit-border-radius: 10px;
/*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
-o-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.table-wrapper table {
width: 460px;
}
.table-header {
height: 35px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 34px;
text-decoration: none;
font-weight: bold;
}
.table-row td {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #858585;
padding: 10px;
border-left: 1px solid #ccc;
-khtml-box-shadow: 0px 1px 0px #B2B3B5;
-webkit-box-shadow: 0px 1px 0px #B2B3B5;
-moz-box-shadow: 0px 1px 0px #ddd;
-o-box-shadow: 0px 1px 0px #B2B3B5;
box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
border-left: 1px solid #ccc;
}
tr th:first-child {
-khtml-border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-o-border-top-left-radius: 8px;
/*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
border-top-left-radius: 8px;
border: none;
}
tr td:first-child {
border: none;
}
tr th:last-child {
-khtml-border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
-o-border-top-right-radius: 8px;
/*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
border-top-right-radius: 8px;
}
tr {
background: #fff;
}
tr:nth-child(odd) {
background: #F3F3F3;
}
tr:nth-child(even) {
background: #fff;
}
tr:last-child td:first-child {
-khtml-border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-o-border-bottom-left-radius: 8px;
/*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
-khtml-border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-o-border-bottom-right-radius: 8px;
/*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-right-radius: 8px;
}

I see a lot of weird hacks and workarounds so I would like to suggest my solution for creating a table with border-radius and the same visual effect as border: collapse; by simply targeting nested rows and cells to turn borders off.
You can get more in-depth to suit your needs using other pseudo selectors like first-child, etc, but this is the minimal solution:
table {
width: 100%;
border-spacing: 0;
border-radius: 4px;
border: 1px solid #ccc;
}
th, td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
th:last-child, td:last-child {
border-right: none;
}
tr:last-child td {
border-bottom: none;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tbody>
</table>

Here is a solution using SCSS. It creates a table with rounded corners and bordered cells.
This solution uses the approach from #Ramon Tayag. The key is to use border-spacing: 0, as he points out.
$line: 1px solid #979797;
$radius: 5px;
table {
border: $line;
border-radius: $radius;
border-spacing: 0;
th,
tr:not(:last-child) td {
border-bottom: $line;
}
th:not(:last-child),
td:not(:last-child) {
border-right: $line;
}
}

easiest way...
table {
border-collapse: inherit;
border: 1px solid black;
border-radius: 5px;
}

Some of the other answers are good, but none of them consider you using thead, tbody and tfoot. Or cases, when you can either combination of those. And when you apply them, you can get some unnecessary rounding or borders.
Thus I tried adjusting css-only answer from #NullUserException and this is what I got:
table {
border-radius: 5px;
border-width: 2px;
border-style: solid;
border-color: darkgreen;
border-spacing: 0;
border-collapse: separate;
width: 100%;
}
table tr td,
table tr th {
border-right-width: 2px;
border-right-style: solid;
border-right-color: darkgreen;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
border-right-width: 2px;
border-right-style: none;
border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
border-bottom-width: 2px;
border-bottom-style: none;
border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 0;
}
/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 0;
}
/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
border-bottom-right-radius: 5px;
}
/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
border-top-style: solid;
border-top-width: 2px;
border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
border-top-style: none;
}
darkgreen is used to clearly show that borders are correct everywhere across the whole table. Essentially, wherever you see darkgreen - is where you style the table's borders.
This codepen shows regular table and the one with thead, tbody and tfoot. CSS is identical to the one above with only the addition of style reset for th. At the moment of writing, you can see, that they both render identically.

I always do this way using Sass
table {
border-radius: 0.25rem;
thead tr:first-child th {
&:first-child {
border-top-left-radius: 0.25rem;
}
&:last-child {
border-top-right-radius: 0.25rem;
}
}
tbody tr:last-child td {
&:first-child {
border-bottom-left-radius: 0.25rem;
}
&:last-child {
border-bottom-right-radius: 0.25rem;
}
}
}

The best solution so far comes from your own solution and it goes like this:
table, tr, td, th{
border: 1px solid;
text-align: center;
}
table{
border-spacing: 0;
width: 100%;
display: table;
}
table tr:last-child td:first-child, tr:last-child, table {
border-bottom-left-radius: 25px;
}
table tr:last-child td:last-child, tr:last-child, table {
border-bottom-right-radius: 25px;
}
table tr:first-child th:first-child, tr:first-child, table {
border-top-left-radius: 25px;
}
table tr:first-child th:last-child, tr:first-child, table {
border-top-right-radius: 25px;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>

table {
width: 200px;
text-align: center;
border-radius: 12px;
overflow: hidden;
}
table td {
border-width: 1px 0 0 1px;
}
table tr:first-child td {
border-top: none;
}
table tr td:first-child {
border-left: none;
}
div {
background-color: lime;
}
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td><div>1</div></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Use "overflow: hidden" with "border-radius"
This works with "collapse" table as well
Example:
border-radius: 1em;
overflow: hidden;

Apply border radius to last row of a table (with ng-repeat)

I use this to style the top row (header) of my table, but how would I do the same for the LAST row?
UPDATE: I am using AngularJS ng-repeat on the table and the middle rows are using the styling intended for the last row only.
th:first-child {
border-top-left-radius: 15px;
}
th:last-child {
border-top-right-radius: 15px;
}

Is something like this what you want?
tr:last-child td:first-child {
border-bottom-left-radius: 15px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 15px;
}

th,td {
width: 100px;
height: 100px;
border: 1px solid red;
}
th:first-child {
border-top-left-radius: 15px;
}
th:last-child {
border-top-right-radius: 15px;
}
tr:last-child td:first-child {
border-bottom-left-radius: 15px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 15px;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Something like this?
tr:last-child {
border-bottom-right-radius: 15px;
}

Let's suppose you have a table with the id of foo.
#foo tr:last td:first-child {
border-top-left-radius: 15px;
}
#foo tr:last td:last-child {
border-top-right-radius: 15px;
}
Make sure you have no invisible trs at the end of the table.