Home/ Questions/Q 8162929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T18:53:48+00:00

so I’ve created a table with table classes and I want the table to

  • 0

so I’ve created a table with table classes and I want the table to have rounded edge, but this code gives me all Cells Rounded. How to have only the table rounded ? thank you

   <!DOCTYPE html>
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
/* This is to have rounded corners */

border:1px solid black;  
/*  change to 1 if border needed */
}
table.margin
{
margin-top:25px;
}

table.margin2
{
margin-top:15px;

border-radius:5px;
-moz-border-radius:5px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your going to need to take the rounded corners code out of the table, td, th since that will apply the rounded corners code to all of those elements, but if you move it to the table { /* rounded corners code here */ } then it won’t apply to the td’s and the th’s.

    This code works for me on chrome.

    <!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>
    • 0