Можно поиграть с псевдоэлементами, которые будут перекрывать border'a (сами border'a можно сделать с помощью фона контейнера и margin между ячейками, например) и nth-of-type, т.к. белые области симметричны друг другу, но смещены отностительно пересечения ячеек и поэтому ширина псевдоэлементов для каждой n-ой ячейки будет своя..
Можно тупо задать position: relative контейнеру, рамки сверстать самым обычным образом подкрашивая border, а внутрь контейнера поместить пару элеметов c position: absolute и z-index, которые бы играли роль засветки на пересечениях рамок. Очевидно, что для более или менее динамической генерации ячеек этот способ не подходит.
Можно сделать комбинацию из двух этих вариантов.
В общем вопрос "как правильно" сильно зависит от вопроса - "а что это должно быть":)