So, I am creating a maze using some algorithm and in this maze I have cells which are basically div elements.
Initially all the cells have borders but as I proceed through the algorithm, I remove certain borders to achieve the maze. Now the problem is that while doing so, the corners of the borders don't join up properly, which can be seen in the image below. 
Here I have removed the right border for cell[0] and the left border for cell[1], and removed the bottom border for cell[0] and the top border for cell[2].
I just want to fix the corner of the borders, but I am unable to do so, I would be really thankful to any help.
cells = document.querySelectorAll(".cell"); //Removing the right-left border cells[0].style["border-right"] = "none"; cells[1].style["border-left"] = "none"; //Removing the top-down border cells[0].style["border-bottom"] = "none"; cells[2].style["border-top"] = "none";*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .row{ display: flex; justify-content: center; align-items: center; } .cell{ height: 50px; width: 50px; border-right: 3px solid black; border-bottom: 3px solid black; } .row .cell:first-of-type{ border-left: 3px solid black; } .row:first-of-type .cell{ border-top: 3px solid black; }<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div class="row"> <div class="cell first"></div> <div class="cell second"></div> </div> <div class="row"> <div class="cell third"></div> <div class="cell forth"></div> </div> </body> </html>Full code:
const nrows = 20; const ncols = 20; for (let i=0; i<nrows; i++){ let row = document.createElement("div"); row.classList.add("row"); document.body.appendChild(row); for (let j=0; j<ncols; j++){ let col = document.createElement("div"); col.classList.add("cell"); row.appendChild(col); } } class Cell{ constructor(i, j){ this.r = i; this.c = j; this.neighbors = []; this.walls = [true, true, true, true]; //Top Right Bottom Left this.visited = false; } show(){ if (!this.walls[0]) cellElements[this.r*ncols + this.c].style["border-top"] = "none"; if (!this.walls[1]) cellElements[this.r*ncols + this.c].style["border-right"] = "none"; if (!this.walls[2]) cellElements[this.r*ncols + this.c].style["border-bottom"] = "none"; if (!this.walls[3]) cellElements[this.r*ncols + this.c].style["border-left"] = "none"; if (this.visited) cellElements[this.r*ncols + this.c].style.background = "greenyellow"; } createNeighbors(){ if (this.r > 0) this.neighbors.push(grid[(this.r-1)*ncols + this.c]) //Top if (this.c < ncols-1) this.neighbors.push(grid[this.r*ncols + (this.c+1)]) //Right if (this.r < nrows-1) this.neighbors.push(grid[(this.r+1)*ncols + this.c]) //Bottom if (this.c > 0) this.neighbors.push(grid[this.r*ncols + (this.c-1)]) //Left } } let cellElements = document.querySelectorAll(".cell"); let grid = []; for (let i=0; i<nrows; i++){ for (let j=0; j<ncols; j++){ grid.push(new Cell(i,j)); } } for (let i=0; i<nrows; i++){ for (let j=0; j<ncols; j++){ grid[i*ncols + j].createNeighbors(); } } let current = grid[0]; let stack = []; //Maze Generator Algorithm function BacktrackingDFS(){ cellElements[current.r*ncols + current.c].style.background = "darkgreen"; if (!current.visited){ current.visited = true; stack.push(current); } let unvisited = []; for (let neigh of current.neighbors){ if (!neigh.visited){ unvisited.push(neigh); } } if (unvisited.length > 0){ let randomIndex = Math.floor(Math.random()*(unvisited.length)); let next = unvisited[randomIndex]; //Remove Walls if(current.r - next.r === 1){ //TOP current.walls[0] = false; next.walls[2] = false; //Fixing Corners }else if(current.c - next.c === -1){ //RIGHT current.walls[1] = false; next.walls[3] = false; }else if(current.r - next.r === -1){ //BOTTOM current.walls[2] = false; next.walls[0] = false; //Fixing Corners }else if(current.c - next.c === 1){ //LEFT current.walls[3] = false; next.walls[1] = false; } current = next; }else if(stack.length > 0){ current = stack.pop(); }else{ console.log("FINISHED!"); clearInterval(drawLoop); } } let drawLoop = setInterval(function(){ for (let i=0; i<nrows; i++){ for (let j=0; j<ncols; j++){ grid[i*ncols + j].show(); } } BacktrackingDFS(); },100);*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .row{ display: flex; justify-content: center; align-items: center; } .cell{ height: 20px; width: 20px; border-bottom: 2px solid black; border-right: 2px solid black; } .row .cell:first-of-type{ border-left: 2px solid black; } .row:first-of-type .cell{ border-top: 2px solid black; }<!DOCTYPE html> <html> <head> <title>Maze Generator</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <script type="text/javascript" src="app.js"></script> </body> </html>
