html - How to set border radius to table border? -
this question has answer here:
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; }
Comments
Post a Comment