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?

html

responsive-design

css-classes

box-shadow

byAlex Kataev·Nov 12, 2024

For applying rounded corners to a table while keeping a collapsed-border look, you will have to eschew the border-collapse: collapse route and take a different path. The workflow involves placing the table inside a container div with overflow: hidden and applying border-radius. Apply direct border-radius to corner cells in your table as follows:

<div style="overflow: hidden; border-radius: 8px;">
  <table>
    <tr>
      <td style="border-top-left-radius: 8px;">...</td> <!-- Top-left cell says: "I'm the rounded guy!" -->
      <td>...</td>
      <td style="border-top-right-radius: 8px;">...</td> <!-- Top-right cell says: "Round like a freshly baked cookie!" -->
    </tr>
    <!-- ... middle rows ... -->
    <tr>
      <td style="border-bottom-left-radius: 8px;">...</td> <!-- Bottom-left cell says: "I may be in the corner, but I'm not square!" -->
      <td>...</td>
      <td style="border-bottom-right-radius: 8px;">...</td> <!-- Bottom-right cell says: "Rounding off our team on the right note!" -->
    </tr>
  </table>
</div>

Bypass `border-collapse: collapse`

To circumvent the limitation of border-collapse: collapse when applying border-radius, we employ several CSS techniques:

Container div: Put the table within a div with styled overflow: hidden to clip the table's corners and allow border-radius effect.
Cell custom border-radius: Apply border-radius only to specific corner cells of the table.
Spaced Borders: Set border-spacing: 0 and border-collapse: separate. It keeps cell borders in touch but still detached.
Hidden Borders: Add border-style: hidden to the table for a continuous look.

More tasty CSS cookies

Here are some alternative methods for achieving rounded borders:

Box-Shadow: Instead of ordinary borders, use a box-shadow with a spread as a border replacement to imitate rounded corners.
Top and Left Borders: Apply border-top to top row cells and border-left to first column cells, thus preserving uniformity.
CSS Classes: Assign different CSS class to each outer cell to ensure precise targeting for corner styling.

Advanced CSS magic tricks

You can perform some advanced CSS tricks like:

Pseudo-elements: Use ::before and ::after to simulate effect of collapsed borders with rounded corners.
SVG Overlays: Place SVGs with rounded corners at table corners to aid the visual effect.
Clipping Paths: Apply CSS clip-path to the container div to clip the sharp corners of the table without affecting the borders.

Unmasking table styling secrets

Styling tables that break conventional HTML table rules requires some in-depth knowledge about how border-radius and border-collapse interact.

border-radius: Creates rounded corners, but it requires border-collapse: separate mode for best results.
border-collapse: collapse: Ideal for removing spaces between cells, making it look like a single continuous shape.

To work around these restrictions, we undertook a combination of CSS techniques:

Nesting Views: Placing the table inside a parent element like a div. We can then control border styling at the parent level.
Selective Border Control: Assigning borders to the required cells only, mimicking the collapsed border appearance.
Shadow Play: Using the box-shadow property to create a seamless table edge effect, while keeping the rounded corners.

Smooth sailing: Address potential fixable errors

While incorporating these CSS workarounds, there can be potential pitfalls to look out for:

Browser Specific Rendering: Different browsers can show different visuals. Test your solution on multiple browsers.
Interactive Effects: Keep in mind how hover effects or similar interactive elements can interfere with your border styling.
Responsive Design: Complex table styling using CSS may affect your table's responsive modification, so it's best to test responsiveness after adding any new styles to it.

explain-codes / Html / 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?

Linked

Table's border-radius does not function as expected



Border style do not work with sticky position element



Controlling Spacing Between Table Cells



Removing unwanted table cell borders with CSS



Rounded table corners CSS only



Border-radius + background-color == cropped border