How do you add a border-radius to a table


#1

How would I add a border radius to the top left, top right, bottom left, and bottom right?

I tried using these, but they don’t work in the code.
or, I couldn’t get them to work.

border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;

https://jsfiddle.net/g6oaht8f/63/

CSS

table {
  border-collapse: collapse;
  width: 606px;
  height: 606px;
}

table td {
  border: 3px solid red;
}

.one {
  border-top-left-radius: 25px;
}

.three {
  border-top-right-radius: 25px;
}

.seven {
  border-bottom-left-radius: 25px;
}

.nine {
  border-bottom-right-radius: 25px;
}

html:

<table>
  <tr>
    <td class="one"></td>
    <td></td>
    <td class="three"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="seven"></td>
    <td></td>
    <td class="nine"></td>
  </tr>

</table>


#2

Border radius won’t work on borders with border-collapse: collapse, it will only affect the background colour (if you set one you will see).
If youremove the collapse you will get a radius on tha actual border.


#3

Thank you for that.


closed #4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.