You can create rounded table corners in CSS by applying the border-radius property to the <table> element. Here’s how you can do it:
CSS Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Table Corners</title>
<style>
table {
border-collapse: separate; /* Important for rounded corners */
border-spacing: 0; /* Removes gaps between table cells */
border: 2px solid #333; /* Table border */
border-radius: 15px; /* Rounds the corners */
overflow: hidden; /* Ensures content fits within rounded borders */
}
th, td {
padding: 10px;
border: 1px solid #333; /* Adds cell borders */
}
th {
background-color: #f4f4f4;
}
td {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Key Points
border-radius:- This property is applied to the
<table>to round its corners. - Example:
border-radius: 15px;.
- This property is applied to the
border-collapse: separate:- Ensures that the
border-radiusworks. If you useborder-collapse: collapse, rounded corners won’t be applied.
- Ensures that the
overflow: hidden:- Prevents content from spilling out of the rounded corners.
border-spacing: 0:- Removes spacing between cells to keep the table neat.
Optional Enhancements
If you want rounded corners only on specific sides, you can adjust the border-radius values:
- Top corners:
border-radius: 15px 15px 0 0; - Bottom corners:
border-radius: 0 0 15px 15px;
Let me know if you’d like further customizations!