CODEWITHSUNDEEP
htmlcsshtml-table
Bhuwan
Bhuwan

Reputation: 16855

Border radius and border together in a table td

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>

Upvotes: 7

Views: 13807

Answers (5)

Muhammad Awais Iqbal
Muhammad Awais Iqbal

Reputation: 171

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.

Upvotes: 0

satyajit rout
satyajit rout

Reputation: 1651

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>

Upvotes: 10

Muhammad Awais Iqbal
Muhammad Awais Iqbal

Reputation: 171

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/

Upvotes: 2

YGouddi
YGouddi

Reputation: 361

Just change 

border-collapse: collapse;

and set it to 

  border-collapse: separate;

Upvotes: 0

Azeez Kallayi
Azeez Kallayi

Reputation: 2642

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>

Upvotes: 0

Related Questions