How to set border radius to table border?

Question

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 to set border-radius to my "td" but not working.

What I want it looks like is border of td of both right and left side is radius.

Is any way can do that?

Answer 1

Here is a jsfiddle for 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;
}