如何重叠表格单元的圆角边框？ （如何删除圆角边框上的双边框？）

Question

基本上我想删除侧面的双边框，每相邻一个字母一个边框。

我想要这个：

但是我明白了：

当前代码：

-------------------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/

我尝试使用：

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

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

我可以使用以下方法重叠边框：

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

但是我不能将文本居中！

也在使用时：

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

它形成了一个怪异的边框，因此并没有真正的帮助。

谢谢您的帮助！