Table's border-radius does not function as expected

html

responsive-design

css

best-practices

byNikita Barsukov·Jan 7, 2025

For table border-radius to work, set border-collapse: separate; and border-spacing: 0; and enclose the table within a div with overflow: hidden; to trim the corners neatly.

Shown in the snippet:

<div style="overflow: hidden;">
  <table style="border-collapse: separate; border-spacing: 0; border-radius: 10px;">
    <!-- Your lovely content lives here -->
  </table>
</div>

border-radius must be declared on <table> element and avoid using border-collapse: collapse; as it negates the rounded border effect.

Covering all corners

Compatibility across browsers

For seamless browsing across Firefox and Chrome, include -moz-border-radius and -webkit-border-radius respectively. As technology evolves, the need for these prefixes may diminish.

Normalize.css and border styles

Using normalize.css or similar CSS reset? It may harbor rules affecting border-collapse. Validate your global rules don't interfere with your table's border styling.

Bring aesthetics to table

Enrich your table's appearance with box-shadow and gradient properties. They work in perfect harmony with border-radius, giving the end-user a mesmerizing experience.

Smooth as silk hover effects

Applying transition property would add a smooth hover effect on your table. These enhancements could up your table's UX game.

Table's width on different devices

Considering width and max-width properties ensures your table is responsive, and the border-radius is displayed as expected, irrespective of the device used for viewing.

Going deeper

Impact of border styles

border-style: hidden; and border-style: none;, both control how the borders handle transparency and radius. 'hidden' completely removes the borders but maintains the cell's space, which could make or break your border-radius appearance.

Styles vs border rendering

Styles applied to table, tr, and td can significantly influence border rendering. Adequate adjustments to th and td padding and border properties can ensure border-radius is not compromised due to other styles.

Browser quirks and empty cells

Empty cells and browser differences are like 👫, they walk hand in hand! Depending upon the browser rendering, your table's border-radius could look different. Ensure coherent styling rules for all cells, including the empty ones.

Rounding with wrapper div

When all else fails, deploy a wrapper div with an overflow: auto; equipped with border-radius. This roundabout way applies the roundness without directly poking the table and its elements.

explain-codes / Html / Table's border-radius does not function as expected

Linked

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?



Border-radius + background-color == cropped border



Controlling Spacing Between Table Cells



Removing unwanted table cell borders with CSS



Border around tr element doesn't show?

