html - How to set border radius to table border? -

this question has answer here:

• css3's border-radius property , border-collapse:collapse don't mix. how can use border-radius create collapsed table rounded corners? 20 answers

table {    width:100%;  }    table, td, tr {    border: 1px #000000 solid;    border-collapse: collapse;    border-radius: 10px;  }    tr {    height:50px;  }    .price {    width: 65%;    text-align: center;    background-color: #000000;    color: #ffffff;    font-size: 1.5em;    border-color: #c0c0c0;    border-radius: 10px;  }    .buy {    width:35%;    text-align: center;    background-color: red;    color: #ffffff;    border-color: #c0c0c0;    }

<table>            <tr>              <td class="price">$180</td>              <td class="buy">buy</td>            </tr>            <tr>              <td class="price">$180</td>              <td class="buy">buy</td>            </tr>            <tr>              <td class="price">$180</td>              <td class="buy">buy</td>            </tr>          </table>

i try set border-radius "td" not working.

what want looks border of td of both right , left side radius.

is way can that?

here jsfiddle you:

table {     width:100%;     background: #000;     border: #000 1px solid;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px; } td, tr {     border: 1px #000000 solid;     border-collapse: collapse;     border-radius: 10px; }