Advanced Border Customization Techniques

Introduction :

Specifying Border Colors

To enhance the visual appeal of HTML tables, you can customize the border color by using the border-color property. This property allows you to define separate colors for different borders, such as top, bottom, left, and right. Here's an example:


  Border Color Change
  
  
    
      Cell 1
      Cell 2
      Cell 3
    
    
      Cell 4
      Cell 5
      Cell 6

<!DOCTYPE html>
<html>
<head>
  <title>Border Color Change</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      padding: 10px;
      border: 5px solid black;
    }
    .red-border {
      border-color: red;
    }
    .blue-border {
      border-color: blue;
    }
    .green-border {
      border-color: green;
    }
  </style>
</head>
<body>
  <h2>Border Color Change</h2>
  <table>
    <tr>
      <td class="red-border">Cell 1</td>
      <td class="blue-border">Cell 2</td>
      <td class="green-border">Cell 3</td>
    </tr>
    <tr>
      <td class="red-border">Cell 4</td>
      <td class="blue-border">Cell 5</td>
      <td class="green-border">Cell 6</td>
    </tr>
  </table>
</body>
</html>

<style>
  table {
    border-collapse: collapse;
  }
  
  td {
    border: 1px solid;
    border-color: red green blue yellow;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>




  
    Cell 1
    Cell 2
  
  
    Cell 3
    Cell 4

Controlling Border Thickness

HTML provides the border-width property to control the thickness of table borders. By specifying the desired thickness in pixels, ems, or other length units, you can achieve different visual effects. Here's an example:




  
    Cell 1
    Cell 2
  
  
    Cell 3
    Cell 4

<!DOCTYPE html>
<html>
<head>
  <title>Table Border Width</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      padding: 10px;
      border: 2px solid black;
    }
    .thick-border {
      border-width: 4px;
    }
    .medium-border {
      border-width: 2px;
    }
    .thin-border {
      border-width: 1px;
    }
  </style>
</head>
<body>
  <h2>Table Border Width</h2>
  <table>
    <tr>
      <td class="thick-border">Cell 1</td>
      <td class="medium-border">Cell 2</td>
      <td class="thin-border">Cell 3</td>
    </tr>
    <tr>
      <td class="thick-border">Cell 4</td>
      <td class="medium-border">Cell 5</td>
      <td class="thin-border">Cell 6</td>
    </tr>
  </table>

  <script>
    var cells = document.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
      cells[i].addEventListener("click", function() {
        this.style.border = "2px solid red"; // Example of changing border dynamically on click
      });
    }
  </script>
</body>
</html>

Applying Rounded Borders

To add a touch of elegance to your HTML tables, you can utilize the border-radius property to create rounded corners for the table or individual cells. This property allows you to control the radius of each corner separately. Here's an example:


  Advanced Border Customization
  
  
    
      Cell 1
      Cell 2
      Cell 3
    
    
      Cell 4
      Cell 5
      Cell 6