2

For some reason, my regular semi-transparent right border doesn´t work on the element which has border-radius on the left and bottom sides. How can I fix it?

See snippet and 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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95

1 Answers1

1

Don't use negative margins to remove the space between inline elements. Set font-size to zero for the container and reset it for the box - see how the issue is solved by itself now: 

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Thank you! Why does this work though? I´m new to this, so an explanation would be really helpful! –  Feb 13 '19 at 01:30
  • That is just the *characteristic* space between inline elements.. see [this](https://stackoverflow.com/questions/40630148/inexplicable-offsets-in-some-very-basic-html/40630355#40630355) and [this](https://stackoverflow.com/questions/45782157/height-of-li-elements-equal-to-height-of-navigation/45782234#45782234) for an example – kukkuz Feb 13 '19 at 01:34
  • @ReduxNewbie check out this [thread](https://stackoverflow.com/questions/40630148/inexplicable-offsets-in-some-very-basic-html/40630355#40630355) too... – kukkuz Feb 13 '19 at 01:38
  • 1
    Thanks a lot! These exchanges are the best way to learn. –  Feb 13 '19 at 01:49
  • It´s because of margin collapse which overrides the border, right? –  Feb 13 '19 at 01:58
  • no you are having *negative margins* to account for the *space between inline elements*... margin collapsing is a different concept :) – kukkuz Feb 13 '19 at 01:59
  • Ok, I think I get it. So basically with the negative margins (since inline-block behaves like text) the divs collapse so the border is lost. –  Feb 13 '19 at 02:05
  • yeah, that is right :) – kukkuz Feb 13 '19 at 02:13