0 

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?

Improve this question
1

1 Answer 1

Reset to default
0

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.