Создаю таблицу используя свойство display: table
. У ячеек таблицы есть своя рамка толщиной 5px, и свойство border-radius
. В браузере Chrome (только) вокруг рамок ячеек появляется ещё одна рамка толщиной 1px (которая при масштабировании исчезает и видна только в местах скругления рамок ячеек, как на скриншоте). Как избавится от нее?
<div class="table">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">1</li>
</ul>
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">1</li>
</ul>
</div>
.table {
display: table;
margin: 50px auto;
background: #514B48;
padding: 10px;
border-radius: 5px;
}
.table-row {
display: table-row;
height: 90px;
}
.table-cell {
display: table-cell;
border: 5px solid #514B48;
text-align: center;
background: #1e1c20;
color: #fff;
width: 90px;
min-width: 90px;
line-height: 80px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
box-sizing: border-box;
}