How do I remove the borders around each div?

Question

I am creating a sketcher tool that allows users to color the 'cells' after they hover over the cell.

The problem I am facing now is that there are white borders around each cell and I can't seem to remove it. I have tried making border: none; border-style:none; padding: 0px; margin: 0px but all don't seem to work.

Here is my the relevant CSS. Github repo

body {
    background-image: url("images/bg.png");
    background-size: cover;
    font-family: 'Orbitron', sans-serif;
}

#container {
    height: 960px;
    width: 960px;
    align-items: center;
    margin: 0 auto;
}

.cell {
    background-color: black;
    height: 60px;
    width: 60px;
    display: inline-block;
    outline: auto;
}

HTML:

<body>
    <h1 class="title glow">RETRO SKETCH</h1>


    <div id="container">

    </div>
    <div class="controls">
        <button class="button glow">Reset</button>
    </div>
    <script src="script.js"></script>
</body>

I'm actually using Javascript to add the cells in.

function createGrid(len) {
    len = len || 16;
    const container = document.querySelector('#container');
    const per_box_len = Math.floor(960 / len);
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            const box = document.createElement('div');
            box.classList.add('cell');
            box.style.width = `${per_box_len}px`;
            box.style.height = `${per_box_len}px`;
            container.appendChild(box);
        }
    }
}

please, post relevant HMTL here, but I guess that maybe `outline:none` instead of `auto` could fix — Calvin Nunes, Dec 08 '20 at 14:17
https://meta.stackoverflow.com/questions/254428/something-in-my-website-or-project-doesnt-work-can-i-just-paste-a-link-to-it — CBroe, Dec 08 '20 at 14:17
Does this answer your question? [Preventing double borders in CSS Grid](https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid) — Roy, Dec 08 '20 at 14:22

score 0 · Accepted Answer · answered Dec 08 '20 at 14:21

0

What about outline:none; Removing btw it will end up with spaces under each line

answered Dec 08 '20 at 14:21

Aristeidis Karavas

1,891
10
29

That removed the white borders! But yeah there are the spaces under each line, then how do I remove them? – ganhy99 Dec 08 '20 at 14:22

How do I remove the borders around each div?

1 Answers1