Rounded Corner Table Template
Soften the sharp edges of your data grid with this friendly and modern rounded corner table.
This subtle design tweak uses the CSS border-radius property to give the entire table a more approachable, contemporary feel that integrates nicely into modern UI designs.
About this Rounded Corner Table
Achieving rounded corners on a standard table requires a couple of specific CSS tricks. Simply applying border-radius to the table element often doesn't work as expected with a collapsed border model. This template uses border-collapse: separate and border-spacing: 0 to ensure the effect works reliably. The key is to apply the radius to the table itself and then use overflow: hidden to clip the corners of the child cells, creating a clean, uniform curve. This small change can make a standard table feel much more integrated with other rounded elements on a page, like buttons and input fields.
Key Features:
- Soft, Modern Aesthetic: Rounded corners create a friendly, less rigid appearance.
- Easy to Customize: The roundness can be easily adjusted by changing the
border-radiusvalue in the CSS. - Consistent with Modern UI: Matches the design convention of many contemporary websites and applications.
- Robust Implementation: Uses the correct CSS properties to ensure the effect is consistent across browsers.
Ideal Use Cases:
- Displaying data in web applications with a soft, modern design system.
- Pricing tables or feature lists on a marketing site.
- Anywhere you want to avoid the harsh, boxy look of a default table.
Dependencies:
None. This template uses only pure HTML and CSS.
Code
Here's the full code for the rounded corner table: