4 Ways to Make a Table With Borders Only On The Inside (Tic-Tac-Toe Style)

You know, like a tic-tac-toe board. I was just pondering how to make a table with borders only on the inside the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.

Possibility #1) Removing the Borders You Don’t Need

This is the first way I think of. Add a border everywhere, then remove the border on the:

1. The top of every cell in the first row
2. The bottom of every cell in the last row
3. The left of the first cell in every row
4. The right of last cell in every row

table {
  border-collapse: collapse;
}
table td {
  border: 5px solid black; 
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child {
  border-right: 0;
}

Possibility #2) The rules Attribute

This is not recommended as it’s a deprecated attribute. But, that’s what the rules attribute was specifically for.

You can control the color with border-color, but not border-width or border-style.

Possibility #3) Using border-style: hidden;

This is the one that feels like a CSS trick to me.

table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border: 5px solid black;
}

MDN has an explanation:

In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won’t be displayed.

By putting border-style: hidden; on the table itself, it means that “hidden” wins on that outside edge, but only the outside edge, not any of the other borders on the inside cells.

Possibility #4: Use the outline property

Carter Li wrote about this then challenged me:

Maybe something like this tic-tac-toe board Chris put together several years ago could benefit from outline, instead of resorting to individually-crafted cell borders. Challenge accepted, Mr. Coyier? 😉

Gotta step to that challenge! Looks like thanks to outline-offset it can be done!

table {
  outline: 2px solid white;
  outline-offset: -2px;
}
table td {
  outline: 2px solid black;
}

Possibility #5: Gradients

Bonus! Temani Afif cooked up a way to do it with a singular conic gradient. It blows my mind so I won’t attempt to explain it.

---

Can you think of other ways?