CODEWITHSUNDEEP
htmlcss
Kyson Kawanishi
Kyson Kawanishi

Reputation: 1

Border radius on a table

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>

Upvotes: 0

Views: 1923

Answers (3)

Gaurav Gusain
Gaurav Gusain

Reputation: 86

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; }

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 1

Oleg Gugunava
Oleg Gugunava

Reputation: 1

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>

Upvotes: 0

Related Questions