Border radius and border together in a table td

Question

I want to give my first and last <td> a border-radius so that my table looks like a rounded table.

First I applied background to my <td> and then added border-radius, which works fine I think(background rounded from the corner).

After that when I applied border to my <td>, I saw a weird thing(See below snippet).

So my question is why border is not rounded as background?

Stack Snippet

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

a weird thing: You mean the table border? Yes, it is specified in the CSS for your table. — ild flue, Jan 22 '18 at 07:57
seems like border-collapse is whats preventing the corners to be rounded. — Naomi, Jan 22 '18 at 07:58
hey border-collapse and border-radius are enemies this might help https://stackoverflow.com/q/628301/7354094 — George, Jan 22 '18 at 08:05
Possible duplicate of [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) — Bram Vanroy, Jan 22 '18 at 08:30

satyajit rout · Accepted Answer · 2018-01-22T08:36:51.550

9

try border-collapse: inherit; and make 'border-spacing: 0px;'

table {
  width: 100%;
  border-collapse: inherit;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
  border-radius: 30px;
  border-spacing: 0px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
  border-left: none;
}
table td:first-child{
  border-left: 1px solid #000000;
}
table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

edited Jan 22 '18 at 08:36

answered Jan 22 '18 at 08:33

satyajit rout

1,623
10
20

Thanks for response! but its giving me 2px border in middle of `td` – Bhuwan Jan 22 '18 at 08:33
@BhuwanBhatt check now made it 1px border – satyajit rout Jan 22 '18 at 08:37
@BhuwanBhatt table has default property border-collapse :separate; so inherit property ll inherit separate only so no problem or u can remove border-collapse :inherit; it ll work – satyajit rout Jan 22 '18 at 10:05

score 1 · Answer 2 · answered Jan 22 '18 at 08:34

Please checkout this solution with first row and last row rounded.

HTML

<table>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: separate;
  border-radius: 20px;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table tr {
  border-radius: 20px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

I hope it will help you.

Fiddle: https://jsfiddle.net/xwqjgb5k/

Thanks but I am looking for a solution in which border should be collapsed..not separate — Bhuwan, Jan 22 '18 at 08:57

score 0 · Answer 3 · answered Jan 22 '18 at 08:01

You can try by removing the border-collapse: collapse; and add cellspacing & cellpadding zero to the table. Below code may help you

table {
  width: 100%;
 
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

Thanks for response! but its giving me 2px border in middle of `td` — Bhuwan, Jan 22 '18 at 08:31

score 0 · Answer 4 · answered Jan 22 '18 at 08:03

0

Just change

border-collapse: collapse;

and set it to

  border-collapse: separate;

answered Jan 22 '18 at 08:03

YGouddi

341
2
14

score 0 · Answer 5 · answered Jan 22 '18 at 09:23

Please checkout the updated solution.

<div class="table-wrapper">
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
</div>

.table-wrapper {
  border-radius: 20px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 20px;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table tr {
  border-radius: 20px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

Updated Fiddle: https://jsfiddle.net/xwqjgb5k/1/

hope it will help you.

Border radius and border together in a table td

5 Answers5