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

Question

<分区>

Answer 1

不要使用负边距来移除内联元素之间的空间。将 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>