Search code examples
htmlcss-tables

Rounded corners on collapsed table border


I've figured out exactly how to make a thinner border for a table, but am struggling to make the borders perfect. I want rounded corners but it doesn't seem to help when I collapse the borders (to make them thin and one), and it works perfectly fine without collapsing, but then the table looks off. Help?

JSFiddle: http://jsfiddle.net/Yx865/

The main focus lies here:

.myData .myTable table{
   border-collapse:collapse;
   border-top-right-radius:20px;
   border-top-left-radius:20px;
   border:1px solid black;
}

Solution

  • If you want to keep the border, just make sure to hide the overflow

    overflow: hidden;
    

    http://jsfiddle.net/n2hB3/