桌子上的边框半径

Question

我正在为学校制作一个网站，其中一个要求是要有一个表格元素。我制作了一个表格元素并将边框半径设置为 25 像素。原来，边框保持默认半径和角落的背景切割。Problem with borders image 这是我使用的代码：

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-collapse: collapse;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 1

使用border-spacing:0 代替border-collapse:collapse 以允许绘制border-radius。

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-spacing:0;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 2

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 3

你可以试试这个技巧： 给表格角落的所有 4 个单元格一个类，然后为每个类设置边框半径，如下所示：

.top-left-cell { border-radius: 25px 0 0 0; }

.top-right-cell { border-radius: 0 25px 0 0; }

.bottom-right-cell { border-radius: 0 0 25px 0; }

.bottom-right-cell { border-radius: 0 0 0 25px; }