【CSS】Flexboxの線の重なりが太くなるのを回避する

Flexboxで表組を作ると、以下のようにborderが重なった箇所が太くなってしまいます。

margin-bottom、margin-rightに線の太さ分のマイナスの値を設定すれば、線が太くなるのを回避できます。

<!-- HTML -->
<div class="search_result_container">
	<div class="search_result_item">Apple</div>
	<div class="search_result_item">Banana</div>
	<div class="search_result_item">Strawberry</div>
	<div class="search_result_item">Orange</div>
</div>

/* CSS */
.search_result_container {
  display: flex;
  flex-wrap: wrap;
}

.search_result_item {
  width: 10em;
  border: 1px solid #ccc;
  padding: 0.3em 0.3em 0.3em 0.3em;
  margin-bottom: -1px;
  margin-right: -1px;
}