Как создать «разрушенные» границы вокруг изгиб и их контейнер? ⇐ CSS

[Anonymous]

У меня есть следующий макет: < /p>

Код: Выделить всё

#limited-width {
width: 100%;
max-width: 200px;
margin: 0 auto;
font-size: 18px;
}
ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin: 20px;
}
ul > li {
display: block;
text-align: center;
flex: 1 0 auto;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 4px 7px;
border: 2px solid rgba(0,0,0,.3);
background-color: rgba(0,0,0,.03);
}< /code>

[list]
[*]Apple
[*]Orange
[*]Pineapple
[*]Banana
[*]Tomato
[*]Pear
[*]Lemon
[/list]

Как вы можете видеть, элементы списка внутри ul имеют границу с шириной 2px , но из -за этого граница между элементами удвоения. Я ищу способ сделать границы одинаковой шириной между элементами, а также удерживая границу снаружи (аналогично тому, как работает граница на таблицах) с использованием Flexbox. Это возможно, и если да, то как?

Подробнее здесь: https://stackoverflow.com/questions/356 ... -container