Rounded table corners CSS only

You can use CSS to round the corners of a table using the border-radius property. Here’s an example:

table { border-collapse: collapse; border-radius: 10px; }

In this example, the border-radius property is set to 10px, which rounds the corners of the table to a radius of 10 pixels. You can adjust the value of border-radius to make the corners more or less rounded.

Note that the border-collapse property is set to collapse, which causes the borders of adjacent cells to be combined into a single border. This makes the table look cleaner and eliminates the double lines that would otherwise appear between the cells.

Here’s a complete example that shows how to create a table with rounded corners:

table { border-collapse: collapse; border-radius: 10px; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #dddddd; }
<th>First Name</th>
<th>Last Name</th>

This code creates a simple table with rounded corners and some basic styling. You can modify the CSS as needed to match your design requirements.