How to create Round HTML Table Borders

With the border-radius property, the borders get rounded corners:

Full Example of Round HTML Table Borders

With border

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>

<h2>Table With Rounded Borders</h2>

<p>Use the CSS border-radius property to add rounded corners to the borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of Round HTML Table Skip Borders

Without Border

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>

<h2>Table With Rounded Borders</h2>

<p>Use the CSS border-radius property to add rounded corners to the table cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Output should be:

What is HTML Table Borders	HTML Table Borders
How To Add a Border in HTML Table	HTML Table Borders
How to create HTML Collapsed Table Borders	HTML Table Borders
How to Create Style HTML Table Borders	HTML Table Borders
How to create Round HTML Table Borders	HTML Table Borders
How to create HTML Dotted Table Borders	HTML Table Borders
How to add HTML Table Border Color	HTML Table Borders

Single Articles

Full Example of Round HTML Table Borders	HTML Table Borders
Full Example of Round HTML Table Skip Borders	HTML Table Borders

Read Full:	HTML Table Borders
Category:	Web Tutorial
Sub Category:	HTML Table Borders
Uploaded by:	Admin
Views:	78

Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_border_round2