0

I'm making a website for school and one of the requirements is to have a table element. I made a table element and set a border radius off 25 px. It turned out to have the borders remain a default radius and the background cut of on the corners.Problem with borders image Here is the code i used:

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Kyson Kawanishi
  • 1
  • 1
  • https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i – radulfr Nov 18 '19 at 20:04
  • 1
    Does this answer your question? [CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?](https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i) – disinfor Nov 18 '19 at 20:12

3 Answers3

1

use border-spacing:0 instead border-collapse:collapse to allow border-radius to be drawn.

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

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>
Oleg Gugunava
  • 1
  • 1
0

You can try this trick: Give all the 4 cells at the corner of the table a class and then for each class set the border-radius like:

.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; }
Gaurav Gusain
  • 76
  • 1
  • 4