How to overlap table-cell rounded borders? (how to remove double borders on rounded borders?)

Question

Basically I want to remove double borders at the sides, one border for every adjacent letter.

I want this:

But i get this:

Current code:

-------------------HTML------------------
    <div class="keyboard">
        <ul>
            <li>Q</li>
            <li>W</li>
            <li>E</li>
            <li>R</li>
            <li>T</li>
            <li>Y</li>
            <li>U</li>
            <li>I</li>
            <li>O</li>
            <li>P</li>
        </ul>
    </div>
--------------------CSS------------------
    .keyboard li{
        display: table-cell;
        border-width: 6px;
        border-style: solid;
        width: 95px;
        height: 95px;
        text-align: center;
        vertical-align: middle;
        border-radius: 10px;
    }

JSfiddle: http://jsfiddle.net/z89c6v0y/

I have tried using:

border-collapse: collapse;
margin-right: -10px;

.keyboard li:not(:last-child) {
    border-right: none;
}

I can overlap borders by using:

display: inline-block;
margin-right: -10px;

but then I can't center the text to the middle!

Also when using:

.keyboard li:not(:last-child) {
    border-right: none;
}

It makes a weird border, so it doesn't really help.

Thank you for your help!

simply add this `.keyboard li:not(:last-child) { border-right:0; }` — Temani Afif, Jan 26 '19 at 15:38
But let's say I want rounded border? It will look weird with `border-right:0;` — katinas, Jan 26 '19 at 15:41
this a different requirement then, you should add those details in the question ... actually you didn't mention any rounded corner. Add it to the question and I will reopen it — Temani Afif, Jan 26 '19 at 15:50
ok my mistake, I will make a more detailed question. Thanks anyway! — katinas, Jan 26 '19 at 15:53
why the use of margin right cannot center the text? https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Temani Afif, Jan 26 '19 at 16:07
because I then I need to use `display: inline-block` instead of `display: table-cell` which allows to center vertically — katinas, Jan 26 '19 at 16:10
Rely on something else to center while keeping the inline-block, like setting `line-height` equal to height — Temani Afif, Jan 26 '19 at 16:10
Yes that works! I swear I have tried this, but it didn't work. But now it does :D. Thanks again! — katinas, Jan 26 '19 at 16:14

How to overlap table-cell rounded borders? (how to remove double borders on rounded borders?)

0 Answers0