Creating a table with rounded corners

Here the css has the code for the rounded corner.

You call the table class in the html whenever you want the round corner.

<!DOCTYPE html>
<html>
 <head>
 <style type=text/css>
 
 .rounded_edges {
  -moz-border-radius: 15px;
  border-radius: 15px;
  border: 1px solid black;
  }
 

 </style>
</head>
  <body>
  <table class="rounded_edges">
  <tr>
  <th>Head 1</th>
  <th>Head 2</th>
  <th>Head 3</th>
  </tr>
 
 <tr>
 
 <td>Cell 1-1</td>
 <td>Cell 1-2</td>
 <td>Cell 1-3</td>
  </tr>
  <tr>
 
 <td>Cell 2-1</td>
 <td>Cell 2-2</td>
 <td>Cell 2-3</td>
 
 </tr>
 </table>
 
 </body>
</html>

Source:

http://stackoverflow.com/questions/11270614/trying-to-create-rounded-corners-on-table-but-only-one-the-edges

Leave a Comment Cancel Reply