无法在一侧设置边框半径，在另一侧设置常规边框

Question

由于

某种原因，我的常规半透明右边框不适用于左侧和底部具有边框半径的元素。我该如何解决它？

请参阅代码片段和codepen：

body {
  background: red;
}
.item {
  margin-left: 10px;
}
.box {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  margin-left: -5px;
  display: inline-block;
  width: 300px;
  background: white;
}
.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</div>

Answer 1

不要使用负边距来删除inline元素之间的空格。将container的font-size设置为零，并为box重置它 - 看看现在如何自行解决问题：

body {
  background: red;
}
.item {
  margin-left: 10px;
}
#container {
  font-size: 0; /* ADDED */
}
.box {
  font-size: initial; /* ADDED */
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  /*margin-left: -5px;*/
  display: inline-block;
  width: 300px;
  background: white;
}
.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</div>