[css] How to add border radius on table row

Does anyone know how to style tr as we like?

I've used border-collapse on table, after that tr's can display 1px solid border I give them.

However, when I've tried -moz-border-radius, it doesn't work. Even simple margin doesn't work.

According to Opera the CSS3 standard does not define the use of border-radius on TDs. My experience is that Firefox and Chrome support it but Opera does not (don't know about IE). The workaround is to wrap the td content in a div and then apply the border-radius to the div.

Bonus info: border-radius has no effect on tables with border-collapse: collapse; and border set on td's. And it doesn't matter if border-radius is set on table, tr or td—it's ignored.

http://jsfiddle.net/Exe3g/

All the answers are way too long. The easiest way to add border radius to a table element that accepts border as a property, is doing border radius with overflow: hidden.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;

Or use box-shadow if table have collapse

Actual Spacing Between Rows

This is an old thread, but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radius on the rows, and gaps between the rows. It does not appear that the current solutions exactly do that. theazureshadow's answer is headed in the right direction, but seems to need a bit more.

For those interested in such, here is a fiddle that does separate the rows and applies the radius to each row. (NOTE: Firefox currently has a bug in displaying/clipping background-color at the border radii.)

The code is as follows (and as theazureshadow noted, for earlier browser support, the various vendor prefixes for border-radius need added).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

I think collapsing your borders is the wrong thing to do in this case. Collapsing them basically means that the border between two neighboring cells becomes shared. This means it's unclear as to which direction it should curve given a radius.

Instead, you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one. You can use first-child and last-child selectors as suggested by theazureshadow, but these may be poorly supported by older versions of IE. It might be easier to just define classes, such as .first-column and .last-column to serve this purpose.

I found that adding border-radius to tables, trs, and tds does not seem to work 100% in the latest versions of Chrome, FF, and IE. What I do instead is, I wrap the table with a div and put the border-radius on it.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

If your table is not width: 100%, you can make your wrapper float: left, just remember to clear it.

Use border-collapse:seperate; and border-spacing:0; but only use border-right and border-bottom for the tds, with border-top applied to th and border-left applied to only tr td:nth-child(1).

You can then apply border radius to the corner tds (using nth-child to find them)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Not trying to take any credits here, all credit goes to @theazureshadow for his reply, but I personally had to adapt it for a table that has some <th> instead of <td> for it's first row's cells.

I'm just posting the modified version here in case some of you want to use @theazureshadow's solution, but like me, have some <th> in the first <tr>. The class "reportTable" only have to be applied to the table itself.:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!

The tr element does honor the border-radius. Can use pure html and css, no javascript.

JSFiddle link: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {_x000D_
    border: 0;_x000D_
    display: block;_x000D_
    margin: 5px;_x000D_
}_x000D_
.solid {_x000D_
    border: 2px red solid;_x000D_
    border-radius: 10px;_x000D_
}_x000D_
.dotted {_x000D_
    border: 2px green dotted;_x000D_
    border-radius: 10px;_x000D_
}_x000D_
.dashed {_x000D_
    border: 2px blue dashed;_x000D_
    border-radius: 10px;_x000D_
}_x000D_
_x000D_
td {_x000D_
    padding: 5px;_x000D_
}

<table>_x000D_
    <tr>_x000D_
        <td>01</td>_x000D_
        <td>02</td>_x000D_
        <td>03</td>_x000D_
        <td>04</td>_x000D_
        <td>05</td>_x000D_
        <td>06</td>_x000D_
    </tr>_x000D_
    <tr class='dotted'>_x000D_
        <td>07</td>_x000D_
        <td>08</td>_x000D_
        <td>09</td>_x000D_
        <td>10</td>_x000D_
        <td>11</td>_x000D_
        <td>12</td>_x000D_
    </tr>_x000D_
    <tr class='solid'>_x000D_
        <td>13</td>_x000D_
        <td>14</td>_x000D_
        <td>15</td>_x000D_
        <td>16</td>_x000D_
        <td>17</td>_x000D_
        <td>18</td>_x000D_
    </tr>_x000D_
    <tr class='dotted'>_x000D_
        <td>19</td>_x000D_
        <td>20</td>_x000D_
        <td>21</td>_x000D_
        <td>22</td>_x000D_
        <td>23</td>_x000D_
        <td>24</td>_x000D_
    </tr>_x000D_
    <tr class='dashed'>_x000D_
        <td>25</td>_x000D_
        <td>26</td>_x000D_
        <td>27</td>_x000D_
        <td>28</td>_x000D_
        <td>29</td>_x000D_
        <td>30</td>_x000D_
    </tr>_x000D_
</table>