HTML Element Style How to - Add border to table cell with different style on each edge

Question

We would like to know how to add border to table cell with different style on each edge.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!-- w ww.j a v a  2s.c  o  m-->
  border-collapse: separate;
}

table td {
  padding: 10px;
  background: #415DA1;
  border-top: solid 10px #F00;
  border-right: solid 5px #CCC;
  border-bottom: solid 10px #F00;
  border-left: solid 5px #CCC;
}

table td:first-child {
  border-left-width: 10px;
}

table td:last-child {
  border-right-width: 10px;
}
</style>
</head>
<body>
  <table>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: