CSS Borders - аккуратно обводить группу DIV

Question

У меня здесь «момент блондинки» - я уверен, что это легко, но я не могу понять это.

У меня есть сетка DIV (10 строк, которые ЯСНО: ОБА - каждый с 10 FLOAT: LEFT DIV фиксированного размера).

Что я хочу сделать, так это назначить границу для группы из них, и это работает (с неокрашенными сторонами / ячейками, имеющимипрозрачная граница, чтобы все выровнялось) НО как работают отдельные границы, «углы» оставляют уродливый эффект.

См. это для примера

AmЯ упустил очевидный трюк, чтобы сделать только сплошную рамку, а не пунктирную линию, чтобы эффект создавался углами ??

Чтобы прояснить мой CSS - строки имеют этот класс

.row {
  clear: both;
}

и ячейки имеют этот класс

.cell {
  float: left;
  border: 5px solid transparent;
}

, а также от 0 до 4 классов, подобных этому

.top { // repeated for bottom, left and right ofc.
  border-top: 5px solid black;
}

Answer 1

Сравнить :

div {
    border: 3px solid white;
    border-right: 3px solid black;
}

К этому :

div {
    border: none;
    border-right: 3px solid black;
}

EDIT

Принятое решение состояло в том, чтобы заполнение заняло место границы, в результате чего границы были бы возведены в квадрат. См:

http://jsfiddle.net/kCd7s/2/

Answer 2

Или попробуйте таким образом :

.top::before,
.bottom::before,
.left::after,
.right::after {
    content: ".";
    width: 100%;
    height: 100%;
    background: black;
    display: block;
    font-size: 0;
    position: absolute;
}
.top::before {
    height: 5px;
}
.bottom::before {
    height: 5px;
    top: 35px;
}
.left::after {
    width: 5px;
}
.right::after {
    width: 5px;
    left: 35px;
}

Answer 3

Если вы поместите границу на всю площадь, то так будет вести себя граница. Если вы хотите избежать этого, вы должны указать поля с черными границами по сторонам, не имеющими границы, равной ширине границы, поэтому сначала добавьте border: none, затем добавьте размеры, например, если нормальная высота равна 20, а граница 5, и вы хотите границу справа, вы должны установить: height: 30; width: 25; border-right: 5px solid;