DEV Community

loading...
Cover image for How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI

How to remove outside borders of a 3x3 grid using CSS, e.g. Tic-Tac-Toe UI

Patricia Nicole
playing with fiery web
・1 min read

I was trying to achieve this kind of UI when I tried implementing the Tic-tac-toe game (I know it looks easy to some XD) Tic-tac-toe board
The challenge was how to properly select the first and last column, as well as the first and last row. I seriously did not want to manually remove the borders of the eight cells.

The data structure of my tic-tac-toe grid is not two-dimensional, but one, so I can easily do the tricks below. Think of my counting as this :
0 | 1 | 2
3 | 4 | 5
6 | 7 | 8

For the first row, the top border should be removed, thus:

.board-item:nth-child(-n + 3) {
    border-top: none;
} 
Enter fullscreen mode Exit fullscreen mode

For the last column,

.board div:nth-child(3n) {
    border-right: none;
}
Enter fullscreen mode Exit fullscreen mode

For the first column,

.board-item:nth-child(3n  - 2) {
    border-left: none;
} 
Enter fullscreen mode Exit fullscreen mode

For the last row,

.board-item:nth-child(n + 7) {
    border-bottom: none;
}
Enter fullscreen mode Exit fullscreen mode

And that is it. Thanks for reading. Check my tic-tac-toe game here.

Discussion (3)

Collapse
afif profile image
Temani Afif

in such situation better consider outline combined with overflow and you don't have to deal with any complex selector: jsfiddle.net/bvjkn9se/ .. it's also scalable: jsfiddle.net/bvjkn9se/1/

Collapse
pat_the99 profile image
Patricia Nicole Author

Thank you for this Temani!

Collapse
alvaromontoro profile image
Alvaro Montoro

Nice game :)