SCSS

by Sujit Kumar Singh

HTML

<div class="parent">
  <div class="child">
    <span>Has proper border</span>
  </div>
  <div class="child">
    <span>Has proper border</span>
  </div>
  <div class="child">
    <span>Has proper border</span>
  </div>
</div>

<div class="parent">
  <div class="child">
    <span>Not proper border</span>
  </div>
  <p>I introduced border issue in above element</p>
</div>

<div class="parent">
  <div class="child">
    <span>Has proper border --</span>
  </div>
  <div class="child">
    <span>Not proper border</span>
  </div>
  <p>I introduced border issue in above element</p>
</div>

SCSS

body {
  background: #fff;
  padding: 0 10px;
  font-family: Helvetica;
}

span {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

.parent {
  margin: 15px 0;
  .child {
    &:not(:last-child) {
      span{ border-bottom-width: 0; }
    }
    // tried just to make things work
    &:last-child {
      span{ border-bottom-width: 1px; }
    }
  }
}