The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?

by

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn’t also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Now everything rounds properly, except that there’s still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

More Related Contents:

  1. 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?
  2. Rounded table corners CSS only
  3. How to design a table like this
  4. Set cellpadding and cellspacing in CSS?
  5. How do I keep two side-by-side div elements the same height?
  6. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  7. Alternate table row color using CSS?
  8. How to make CSS3 rounded corners hide overflow in Chrome/Opera
  9. How to create uneven rounded sides on a div?
  10. HTML/CSS: Making two floating divs the same height
  11. Why doesn’t table > tr > td work when using the child selector?
  12. Table with fixed header and fixed column on pure css
  13. How to display scroll bar onto a html table
  14. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  15. Fixed header table with horizontal scrollbar and vertical scrollbar on
  16. How to make fill height
  17. Add a horizontal scrollbar to an HTML table
  18. Wrap text in tag
  19. CSS table-cell equal width
  20. using text-align center in colgroup
  21. Giving a border to an HTML table row,
  22. overflow:scroll; in
  23. How can I apply a border only inside a table?
  24. Equivalent to float in Outlook
  25. Table overflowing outside of div
  26. Removing unwanted table cell borders with CSS
  27. Should Tables be avoided in HTML at any cost?
  28. Yet Another Divs vs Tables issue: Forms
  29. Splitting a table cell into two columns in HTML
  30. Table vertical header?

Leave a Comment