1px общий: наведение границы на двух элементах

Два inline-block элемента рядом друг с другом.

.e{border:1px #ccc solid}
.e:hover{border-color:#555}

Я бы хотел уменьшить границу 1px + 1px между ними до общей границы 1px .

Для иллюстрации.

---------
|   |   |
---------

Выбрать первый элемент.

+++++-----
+   +    |
+++++-----

Выберите второй элемент.

-----+++++
|    +   +
-----+++++

Можно просто уменьшить границу 2px до 1px , установив для border-right или border-left значение 0 , но как сохранить общую границу 1px при выборе любого из элементов?

Без JavaScript.