HTML/CSS表格border-radius属性不生效问题求助

你的表格圆角失效的核心原因不是浏览器默认边框，而是内部<th>/<td>的边框超出了<table>的圆角范围，再加上border-collapse: collapse会让表格的圆角被内部元素的边框完全覆盖。另外你的代码里还有两个小问题影响效果，下面是具体修复步骤：

修复步骤 #

• 把<table>的border-collapse: collapse改成border-spacing: 0，这样内部单元格的边框不会和表格边框合并，配合overflow: hidden就能让圆角生效。
• 给表格四个角的单元格单独设置对应方向的圆角，避免内部边框露在圆角外面。
• 修正第二个表格里的标签错误：把<tb>改成<tbody>，否则tbody的样式不会生效。
• 调整单元格边框的设置，避免重复边框（比如只给单元格加左右边框，最后一行加下边框，表头加边框）。
• 修正CSS里的语法错误：font-size: 0,9rem里的逗号改成小数点.9rem。

修改后的完整代码 #

CSS代码 #

* {
  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-spacing: 0; /* 替换border-collapse */
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  overflow: hidden;
  border: 0;
}

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

table thead tr th {
  background-color: rgb(11, 134, 93);
  color: white;
  padding: 12px 15px;
  border: 3px solid black;
  border-bottom: none; /* 去掉表头下边框，避免和tbody重复 */
}

/* 表头的两个圆角 */
table thead tr th:first-child {
  border-top-left-radius: 15px;
}
table thead tr th:last-child {
  border-top-right-radius: 15px;
}

table tbody tr td {
  border: 3px solid black;
  border-top: none; /* 去掉tbody单元格上边框，避免和表头/上一行重复 */
  padding: 12px 15px;
  font-size: 0.9rem; /* 修正语法错误 */
}

/* 表格底部的两个圆角 */
table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 15px;
}
table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 15px;
}

HTML代码 #

<!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 class="firstPara">
    <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 class="univeralSelector">*</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>
    <!-- 修正为正确的tbody标签 -->
    <tbody>
      <tr>
        <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>
      </tr>
    </tbody>
  </table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Alfred