Как избавиться от наложений border`ов друг на друга?

Question

[pashakabat]

Есть карточки товаров. Они стоят вплотную друг к другу. У каждой карточки задан border 1px. В местах стыков карточек происходит наложение границ. Как это исправить не используя таблицы?

Answer 1

[Алексей Николаев]

Да много чего можно, в принципе.

1. использовать outline вместо border
2. сделать margin-left: -1px у всех не первых карточек в строке
3. сделать margin-right: -1px у всех не последних карточек

Comments

[AngReload]

Обычно убирают левую границу

.item {
  border: 1px solid grey;
  border-left-width: 0;
}
.item:first-child {
  border-left-width: 1px;
}