How to Customize HTML Table Border Colors

You can pretty easily customize the border color of your HTML table with a little CSS to define the style and color of your table borders. In this post we’ll walk you through setting the border color of an HTML table using both inline CSS styles and external CSS styles.

How to use inline CSS to change table border color?

Applying styles directly to an HTML element through inline CSS is pretty simple. It’s perfect for small projects or styling single tables. Here’s how to change your table’s border color using inline CSS:

<table style="border: 2px solid #FF5733; border-collapse: collapse;">
  <tr>
    <th style="border: 2px solid #FF5733;">Header 1</th>
    <th style="border: 2px solid #FF5733;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 2px solid #FF5733;">Cell 1</td>
    <td style="border: 2px solid #FF5733;">Cell 2</td>
  </tr>
</table>

This snippet creates a table with the border color #FF5733 (a nice shade of orange) and merges the borders between cells for a sleek look.

How to change table border color using external CSS?

For projects requiring consistency across multiple tables or when you aim for cleaner HTML, external CSS is your go-to. Defining CSS rules in a separate stylesheet enhances maintainability and scalability.

.custom-table {
  border: 2px solid #FF5733;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  border: 2px solid #FF5733;
}

<table class="custom-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

This approach separates content from styling, allowing you to apply consistent border styles across numerous tables simply by assigning the custom-table class.