How can I round the borders of this table?

Question

I used a html code generator in order to create this table just for ease, I want to give it rounded borders but am clueless as to how

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}

<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

Could anyone give me some help, complete noob here sorry

I've tried adding CSS solutions i've found online but because of the way the table is generated none of it works, I know I should just build the table from scratch but at the time this was so much quicker and it is used multiple times across a site, only now am I deciding to add borders and it would be easier to add it to tables where it is needed rather than replacing them completely

This might offer some guidance: https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row — ralph.m, Jul 13 '23 at 22:53
You can round each TD element. If you want the outside only, you need to specify with the CSS-:nth-child(1) selector — agiopnl, Jul 13 '23 at 23:01

score 1 · Answer 1 · answered Jul 13 '23 at 23:37

On table:

border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;

Full code (unchanged except .tg):

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 1em;
  overflow: hidden;
  outline: 3px solid #93d22c;
  outline-offset: -3px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}

<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

Thanks so much, I don't have enough feedback to cast my upvote on this account but this worked perfectly. — J M, Jul 14 '23 at 11:29
@JM, if it soled your problrm, accept an answer by clicking checkmark on the left of it. — Qwertiy, Jul 14 '23 at 19:42

score 0 · Answer 2 · answered Jul 14 '23 at 01:24

Remove border-collapse: collapse; its cause you not to do an rounded border for table using a border-radius. Instead, just use border-spacing: 0; then do an border-radius.

.tg {
  /* border-collapse: collapse; */
  border-spacing: 0;
}

tr:first-child th:first-child {
  border-top-left-radius: 20px;
}
tr:first-child th:last-child {
  border-top-right-radius: 20px;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}

<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

How can I round the borders of this table?

2 Answers2