HTML bordercolor Attribute – A Complete Guide with Examples and Best Practices

What is the bordercolor Attribute in HTML?

The bordercolor attribute was used in older versions of HTML (before HTML5) to set the color of table borders. However, this attribute is deprecated in HTML5. The recommended modern approach is to use CSS (border and border-color).

🔹 Note: While bordercolor still works in some older browsers, it is better to use CSS for compatibility with modern web standards.

Step-by-Step Guide to Using bordercolor in Tables

Step 1: Applying bordercolor to a Table

<table border="5" bordercolor="red">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

🔹 Output: The table border will be red.

Step 2: Applying bordercolor to Table Rows (<tr>)

 
<table border="5">
    <tr bordercolor="blue">
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

🔹 Output: The first row’s border will be blue, but this may not work consistently in modern browsers.

Step 3: Applying bordercolor to Individual Cells (<td> or <th>)

<table border="5">
    <tr>
        <td bordercolor="green">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td bordercolor="purple">Cell 4</td>
    </tr>
</table>

🔹 Output: Some browsers may not support bordercolor inside <td>. Modern CSS is recommended.

Modern Alternative: Using CSS for Border Colors

Since bordercolor is deprecated, the best practice is to use CSS to style table borders.

Using CSS Instead of bordercolor

<style>
    table {
        border: 5px solid red; /* Table border color */
        border-collapse: collapse;
    }
    td, th {
        border: 3px solid blue; /* Cell border color */
        padding: 10px;
        text-align: center;
    }
</style>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

🔹 Advantages of Using CSS:
✅ Works in all modern browsers.
✅ More flexible and customizable.
✅ Allows for advanced styling (e.g., dashed, dotted, or double borders).

Best Practices for Table Borders

✅ Use border-collapse: collapse; to merge adjacent borders.
✅ Use CSS instead of bordercolor for modern web development.
✅ Use consistent color schemes for readability.

Common Mistakes to Avoid

❌ Using bordercolor in HTML5 – it’s deprecated.
✅ Use CSS border-color instead.

❌ Forgetting border-collapse: collapse; – it prevents double borders.