Как сделать такие линии между блоками?

Имеется такая вёрстка блоков:
* { width:576px; } .item { border: 1px #dededc solid; height: 232px; } #four-blocks { overflow: hidden; } #four-blocks .item { width: 280px; float: left; margin-bottom: 10px; } #four-blocks .item:nth-child(1), .item:nth-child(3){ margin-right: 11px; /*box-shadow: 0 3px 0 3px coral;*/ }

Нужно, чтобы по горизонтали и по вертикали блоки отделяла линия, вот так:

Как это сделать? Я что-то не соображу.

Ответ

Это можно сделать с помощью псевдокласса :nth-child и псевдоэлементов :before и :after
#four-blocks { overflow: hidden; width: 580px; } #four-blocks .item { border: 1px #dededc solid; height: 232px; float: left; position: relative; width: 280px; } #four-blocks .item:nth-child(-n + 2) { margin-bottom: 13px; } #four-blocks .item:nth-child(-n + 2):before { content: ''; background: #F2F2F0; height: 1px; position: absolute; bottom: -8px; width: 100%; } #four-blocks .item:nth-child(2n + 1) { margin-right: 13px; } #four-blocks .item:nth-child(2n + 1):after { content: ''; background: #F2F2F0; height: 100%; position: absolute; right: -8px; width: 1px; }