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

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元素之间的空格。将font-size的{​​{1}}设置为零，并将container重置为零-现在看看问题是如何通过自身解决的：

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;
}