HTML Table Borders
A table without borders looks like floating text — rows and columns are invisible. Adding borders makes your data readable and organized. This topic covers every way to control table borders in HTML, from the basic border attribute to CSS border properties.
The Old Way — border Attribute
HTML used to include a border attribute directly on the <table> tag. You can still use it, but modern web development uses CSS for borders instead.
<table border="1">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>
The value 1 adds a thin border. Higher numbers make thicker borders. This attribute only adds outer borders around cells — it does not give you style control.
Visual Diagram — border="1"
+--------+-----+ | Name | Age | +--------+-----+ | Alice | 25 | +--------+-----+ | Bob | 30 | +--------+-----+
The Modern Way — CSS Borders
CSS gives you complete control over border color, thickness, and style. Apply CSS through a style attribute directly on the table, or through a stylesheet.
Adding a Basic Border
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>₹10</td>
</tr>
</table>
The border CSS property takes three values: thickness (1px), style (solid), and color (black).
The Double Border Problem and How to Fix It
When you apply a border to both the table and the cells, each cell gets its own border and the table gets its own border. The two borders sit next to each other and create a double-line effect.
Visual Diagram — Double Border Problem
Without border-collapse: ++----------++----------++ || || || || Product || Price || || || || ++----------++----------++ || || || || Apple || ₹10 || || || || ++----------++----------++ ↑ double lines between cells With border-collapse: collapse: +----------+----------+ | | | | Product | Price | | | | +----------+----------+ | | | | Apple | ₹10 | | | | +----------+----------+ ↑ single clean lines
Fixing Double Borders with border-collapse
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
The border-collapse: collapse rule tells the browser to merge adjacent cell borders into one line. Always add this rule when you want clean single-line borders.
Border Style Options
The CSS border-style property accepts several visual styles.
solid → ———————— (one solid line) dashed → - - - - (short dashes) dotted → . . . . (small dots) double → ═══════ (two parallel lines) groove → engraved look ridge → raised look inset → pushed-in look outset → popped-out look none → no border at all
Example — Dashed Border
<style>
table {
border-collapse: collapse;
}
td {
border: 2px dashed gray;
padding: 8px;
}
</style>
Border Color
Change border color using any valid CSS color value — named colors, hex codes, or RGB values.
td { border: 1px solid #3498db; } /* blue border */
td { border: 1px solid red; } /* red border */
td { border: 1px solid #ccc; } /* light gray border */
Border Width
Control border thickness in pixels, ems, or using keywords.
td { border: 1px solid black; } /* thin */
td { border: 3px solid black; } /* medium */
td { border: 5px solid black; } /* thick */
td { border: thin solid black; } /* keyword: thin */
td { border: thick solid black; } /* keyword: thick */
Individual Side Borders
You do not have to apply borders to all four sides at once. Target each side separately for creative table designs.
td {
border-top: 2px solid black;
border-bottom: 1px solid gray;
border-left: none;
border-right: none;
}
Visual Diagram — Bottom Border Only (Horizontal Lines Style)
Product Price ────────────────────── Apple ₹10 ────────────────────── Banana ₹5 ────────────────────── Mango ₹20 ────────────────────── Only bottom borders create a striped, minimal look.
Round Borders with border-radius
The border-radius property adds rounded corners to cells or to the whole table.
table {
border-collapse: separate; /* must use separate, not collapse */
border-spacing: 4px;
border-radius: 10px;
}
td {
border: 1px solid black;
border-radius: 6px;
}
Note that border-radius on a table only works when border-collapse is set to separate instead of collapse.
Removing Specific Borders
Some table designs look cleaner with borders only on the outside of the table, not between cells. Apply the outer border to the table and remove it from cells.
table {
border: 2px solid black;
border-collapse: collapse;
}
td, th {
border: none;
padding: 10px;
}
Visual Diagram — Outer Border Only
+------------------------+ | Product | Price | | Apple | ₹10 | | Banana | ₹5 | | Mango | ₹20 | +------------------------+ Only the outer box border is visible.
The border-spacing Property
When border-collapse is set to separate, the border-spacing property controls the gap between cell borders.
table {
border-collapse: separate;
border-spacing: 10px; /* 10px gap between all cells */
}
You can also set different horizontal and vertical spacing:
border-spacing: 10px 5px; /* 10px horizontal, 5px vertical */
Complete Practical Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #333;
color: white;
border: 1px solid #333;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #ccc;
padding: 10px;
}
tr:nth-child(even) td {
background-color: #f9f9f9;
}
</style>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>Delhi</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>Mumbai</td>
<td>88</td>
</tr>
</table>
This example creates a professional-looking table with dark header, alternating row colors, and subtle gray cell borders — a design pattern used widely across the web.