How to Make an HTML Table With Rounded Corner Using CSS
This brief programming guide is bout CSS styling for making a rounder corners table on an HTML page.
Make an HTML Table With Rounded Corners Using CSS
The property that makes the corners rounded for an image, table, or div segment is border-radius. This property sets the corner radius of any HTML element, such as a table.
Let us look at the example below:
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
In this CSS styling, we have applied different styles to different components of the table td, th, table, etc.
The first style we have applied is the border property of solid black 1px, and then we have applied a border radius of 10px. This property will make all the borders of the table a rounded shape.
Then we applied the border to all the cells in black color of size 1px. The HTML code will be:
<body>
<table>
<thead>
<tr>
<th>Table </th>
<th>Header</th>
<th>Row</th>
</tr>
</thead>
<tr>
<td>sample</td>
<td>text</td>
<td>sample</td>
</tr>
<tr>
<td>text</td>
<td>sample</td>
<td>text</td>
</tr>
</table>
</body>
This table has a header row and two rows for sample data.
The number of rounded corners depends on the size we have provided. Thus, we can see how we can make the rounded corners of an HTML table.