JSFiddle - React, Tailwind, and code Playground

by smallone1

HTML

<table>
  <tr>
    <td style="border-style:none;">none</td>
    <td style="border-style:dotted;">dotted</td>
    <td style="border-style:dashed;">dashed</td>
  </tr>
  <tr>
    <td style="border-style:solid;">solid</td>
    <td style="border-style:double;">double</td>
    <td style="border-style:groove;">groove</td>
  </tr>
  <tr>
    <td style="border-style:ridge;">ridge</td>
    <td style="border-style:inset;">inset</td>
    <td style="border-style:outset;">outset</td>
  </tr>
</table>
<hr>
<table class="table2">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

table {
  border-spacing: 5px;
  background-color: yellow;
}

td {
  border-width: 5px;
}

.table2 {
  border: 1px solid;
  border-radius: 10px 20px 30px 40px;
}