Need help figuring out why border-radius property is not working on tables-CodePudding

I am trying to round off the outer corners of tables in HTML/CSS. I have not been able to figure out why the border-radius property does not work.

When I inspect the elements in chrome (computed section), I noticed that the elements have a border of 3 (which encroaches into the outer corners). When I add "border: 0"; it does not work. My guess is that the browser has a default border applied.

I appreciate any suggestions.

Thank you.

* {
  box-sizing: border-box;

}

h1 {
  color: rgb(11, 8, 165);
  text-align: center;
  margin-bottom: 80px;
}

h2 {
  color: rgb(5, 59, 41);
  text-align: center;
}

body {
  background-color: rgb(226, 220, 176);
}

.firstPara p {
  text-align: center;
}

table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  overflow:hidden;
  perspective: 1px;
  border: 0px;
}

.univeralSelector {
  color: rgb(211, 21, 21);
}

table thead tr th {
  background-color: rgb(11, 134, 93);
  color: white;
  padding: 12px 15px;
  border: 3px black solid;
}

table tbody tr td {
  border: black solid;
  padding: 12px 15px;
  font-size: 0,9rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css">
  <title>Common CSS Properties</title>
</head>
<body>
  <header><h1>Common CSS Properties</h1></header>
  
  <h2>Different Types of Selectors</h2>
  <div >
    <p>Selectors are used to style HTML elements according to their type and/or attributes.
      <br>
       All markups can be selected with the universal selector: "
       <span >*</span>  "{
        /* declarations here */
      }
    </p>
  </div>
  
  <table>
    <thead>
      <tr>
        <th>Select by</th>
        <th>Syntax</th>
        <th>Example</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Type</td>
        <td>element-name {
        /* declarations here */}</td>
        <td>
        p {
          text-align: center;
          color: red;}</td>
      </tr>

      <tr>
        <td>Attribute</td>
        <td>'id' (in the HTML file) '#' (in CSS file) 
          <br>'class' (in HTML file) '.' (in CSS file)</td>
        <td>#para1 {
          text-align: center;
          color: red;
        }
        <br>
        .center {
          text-align: center;
          color: red;}</td>
      </tr>
    </tbody>
  </table>

  <h2>CSS Units</h2>
  
  <table>
    <thead>
      <tr>
        <th>Absolute Units</th>
        <th>Relative Units</th>
      </tr>
    </thead>
    <tb>
      <td>
        <ul>
          <li>
            em: Property size relative to property size of direct parent element (most common)
          </li>
          <li>
            rem: Property size relative to property size of direct root element
          </li>
          <li>
            vw: Percentage based on width of screen
          </li>
          <li>
            vh: Percentage based on height of screen
          </li>
        </ul>
      </td>
      <td>
        <ul>
          <li>px: Pixels (most common)</li>
          <li>pt: Points</li>
          <li>mm: Millimeters</li>
        </ul>
      </td>
    </tb>
  </table>
</body>
</html>

CodePudding user response：

border-radius doesnt work on table tag when it has "border-collapse: collapse;". try "border-collapse: separate;"

CodePudding user response：

border-collapse and border-radius have conflict, so border-radius doesn't work. you can use div wrap table, then set border and border-radius on div

CodePudding user response：

There are two issues here, first the border is applied to table cell while the border-radius is set on the table.

border-radius doesn't work with border-collapse: collapse;, use border-collapse: separate;border-spacing: 0px; instead.

You can use a combination of table borders with rounded corners and cell borders for the grid.

Here's a working implementation:

* {
  box-sizing: border-box;

}
h1 {
  color: rgb(11, 8, 165);
  text-align: center;
  margin-bottom: 80px;
}
h2 {
  color: rgb(5, 59, 41);
  text-align: center;
}
body {
  background-color: rgb(226, 220, 176);
}
.firstPara p {
  text-align: center;
}
table {
  margin-left: auto;
  margin-right: auto;
  perspective: 1px;
}
.univeralSelector {
  color: rgb(211, 21, 21);
}
table thead tr th {
  background-color: rgb(11, 134, 93);
  color: white;
  padding: 12px 15px;
}
table tbody tr td {
  padding: 12px 15px;
  font-size: 0.9rem;
}
table {
  border-collapse: separate;
  border-spacing: 0px;
}
th {
  border: 3px solid black;
  border-right: 1px solid black;
  border-left: 2px solid black;
}
th:first-child {
  border-left: 3px solid black;
}
th:last-child {
  border-right: 3px solid black;
}
td {
  border-left: solid black;
  border-bottom: solid black;
}
td:last-child {
  border-right: solid black;
}
th:first-child {
  border-top-left-radius: 15px;
}
th:last-child {
  border-top-right-radius: 15px;
}
tr:last-child > td:first-child {
  border-bottom-left-radius: 15px;
}
tr:last-child > td:last-child {
  border-bottom-right-radius: 15px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css">
  <title>Common CSS Properties</title>
</head>
<body>
  <header><h1>Common CSS Properties</h1></header>
  
  <h2>Different Types of Selectors</h2>
  <div >
    <p>Selectors are used to style HTML elements according to their type and/or attributes.
      <br>
       All markups can be selected with the universal selector: "
       <span >*</span>  "{
        /* declarations here */
      }
    </p>
  </div>
  
  <table>
    <thead>
      <tr>
        <th>Select by</th>
        <th>Syntax</th>
        <th>Example</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Type</td>
        <td>element-name {
        /* declarations here */}</td>
        <td>
        p {
          text-align: center;
          color: red;}</td>
      </tr>

      <tr>
        <td>Attribute</td>
        <td>'id' (in the HTML file) '#' (in CSS file) 
          <br>'class' (in HTML file) '.' (in CSS file)</td>
        <td>#para1 {
          text-align: center;
          color: red;
        }
        <br>
        .center {
          text-align: center;
          color: red;}</td>
      </tr>
    </tbody>
  </table>

  <h2>CSS Units</h2>
  
  <table>
    <thead>
      <tr>
        <th>Absolute Units</th>
        <th>Relative Units</th>
      </tr>
    </thead>
    <tb>
      <td>
        <ul>
          <li>
            em: Property size relative to property size of direct parent element (most common)
          </li>
          <li>
            rem: Property size relative to property size of direct root element
          </li>
          <li>
            vw: Percentage based on width of screen
          </li>
          <li>
            vh: Percentage based on height of screen
          </li>
        </ul>
      </td>
      <td>
        <ul>
          <li>px: Pixels (most common)</li>
          <li>pt: Points</li>
          <li>mm: Millimeters</li>
        </ul>
      </td>
    </tb>
  </table>
</body>
</html>