title: How to "get rid of" bottom border of element inside portview (container overflow-y scroll) also has border
body: <p>I want to create a seamless port-view which contains a list of element as images below.</p>
  
  <p>Top:
  <a href="https://i.stack.imgur.com/KiRXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KiRXk.png" alt="top"></a>
  Bottom:
  <a href="https://i.stack.imgur.com/XaGjz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XaGjz.png" alt="bottom"></a></p>
  
  <p>I mimic collapse border and hide top border of the first element by using <code>margin: -1px 0px 0px -1px;</code>. But when I scroll to the bottom, there's still the double border (1px of last element's border + 1px of container's border). Please check the snippet.</p>
  
  <p>My question is "is there a way to hide the bottom border of the last element?". All helps are greatly appreciated!</p>
  
  <p>Some requirements: </p>
  
  <ol>
  <li>Containers and elements must have 1px border</li>
  <li>Elements' markup should be identical to each other. They can be changed by JS (It's ugly but if it's the only way to do then OK).</li>
  <li>Sizes must be accurately to the pixels.</li>
  <li>IE8+ compatible</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    border: 1px solid #ccc;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .container {
    height: 96px; /*(elements' height - 1) * page view + 1 */
    overflow-y: auto;
  }
  .element {
    height: 20px;
    margin: -1px 0px 0px -1px; /* mimic border-collapse &amp; fix border-top seam */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="element"&gt;EL 1: border-top of me is hidden.
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 2
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 3
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 4
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 5
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 6
    &lt;/div&gt;
    &lt;div class="element"&gt;EL 7: border-bottom of me would like to be hidden as well.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>