Table border is not giving the desire result

Question

I am trying to make a table with rounded corners AND a single solid border between <tr>'s. However, I seem to have a bit of a problem correctly using border-collapse. When I set border-collapse: separate, I get the following:

Result - border-collapse: separate

Code

HTML

<table>
    <tr>
        <td>
            This
        </td>
        <td>
            that
        </td>
        <td>
            the other.
        </td>
    </tr>
    <tr>
        <td>
            This
        </td>
        <td>
            that
        </td>
        <td>
            the other.
        </td>
    </tr>
</table>

CSS

table, tr {
 border: 1px solid black;
 border-collapse: separate;
 border-color: #ACACAC;
 border-radius: 5px;
}

However, when I use border-collapse: collapse, I get the correct line between the <tr>'s but the corners are not rounded, as see here:

Result - border-collapse: collapse

Does anyone know how to get both the line between the <tr>'s WITH the rounded corners?

Thanks so much!

possible duplicate of [CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?](http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i) — chiliNUT, Sep 27 '14 at 23:08

Giannis Grivas · Accepted Answer · 2014-09-27T23:31:00.167

2

Add cellpadding = 0 and cellspacing = 0 at the table element ,remove border-bottom of the tr elments and add this CSS border-bottom for all td elements except last one like:

tr:not(:last-child) td{    
  border-bottom:1pt solid #ACACAC; 
}

table,
tr {
  border: 1px solid black;
  border-color: #ACACAC;
  border-radius: 5px;
}
td {
  padding: 5px;
}
tr:not(:last-child) td {
  border-bottom: 1pt solid #ACACAC;
}

<table cellspacing=0 cellpadding=0>
  <tr>
    <td>
      This
    </td>
    <td>
      that
    </td>
    <td>
      the other.
    </td>
  </tr>
  <tr>
    <td>
      This
    </td>
    <td>
      that
    </td>
    <td>
      the other.
    </td>
  </tr>
</table>

It is working :

http://jsfiddle.net/csdtesting/dngpq4hb/3/

edited Sep 27 '14 at 23:31

answered Sep 27 '14 at 23:07

Giannis Grivas

3,374
1
18
38

1

You almost got it, but the border-bottom goes outside the rounded corner. Remove `border-bottom: none` from table and move td border-bottom to `tr:not(:last-child) td{}` – Johan Karlsson Sep 27 '14 at 23:25
Dont forget that sometimes we are lost at this paradise and our brain will explode sometime :) – Giannis Grivas Sep 27 '14 at 23:32

Table border is not giving the desire result

1 Answers1