Как схлопнуть(обьединить) границы у рядом стоящих блоков?

Question

[Андрей]

В примере по ссылке есть множество элементов с границей в 1 пиксель. Границы соседних элементов сливаются, и получается толстая граница в 2 пикселя. Можно ли объединить границы соседних элементов средствами CSS? Желательно не меняя свойство display у элементов на table-подобные значения.
https://jsfiddle.net/f7c7qww4/4/

Сейчас выглядит так

spoiler

Хотелось бы так

spoiler

Comments

[ink]

я не совсем понял слово схлопнуть , https://jsfiddle.net/f7c7qww4/8/ это может быть вариантом ?

[Андрей]

ink, не совсем. Под схлопыванием я имел ввиду обьединить границы. Приложил к вопросу поясняющие изображения

[ink]

Андрей, https://jsfiddle.net/f7c7qww4/11/ так конечно какая то шляпа получается ... да ?

[Андрей]

ink, толстых границ стало на 25% меньше) Но вообще да, такое решение вопрос не решает)

[ink]

Андрей, тогда вот так , вариант :https://jsfiddle.net/f7c7qww4/13/

[Андрей]

ink, ни в хроме, ни в фаерфоксе не работает, изменений нет

[ink]

Андрей, не ту ссылку дал - сории : https://jsfiddle.net/f7c7qww4/14/

[Андрей]

ink, код в предыдущей и в этой не отличаются вроде бы

[ink]

Андрей, я не уверен в этом ..но на css такое не сделать ... подожди других участников .... либо псевдо таблицы

[Андрей]

ink, псевдотаблицы это то, от чего я пытаюсь уйти, перейти на flex. Спасибо за помощь)

[ink]

Андрей, это отследить можно на js , так как css не знает какой блок у вас переносится .... или какой стоит рядом .. хотя если запретить перенос - flex-wrap:nowrap тогда можно применить nth-child(odd) и убрать правый бордюр

Answer 1

[Одиночка Айс]

width: 50px;
height: 40px;
border: 1px solid #000;
box-sizing: border-box;
margin: -1px -1px 0 0;

Answer 2

[xmoonlight]

https://codepen.io/dalgard/pen/Dbnus

Comments

[Андрей]

К сожалению, проблема не решается, двойные границы как были двойными, так и остаются. С box-sizing пересчитываются размеры самих элементов, и всё

[xmoonlight]

Андрей, https://codepen.io/dalgard/pen/Dbnus