title: CSS Borders in list items
body: <p>Hi I have a problem using borders in list items. <br>
  I wanted to make all the elements in the &lt;li&gt; have borders but the &lt;li&gt; exceeding the width of the window loses their border on the right side. How can I fix this?<br>
  Here is the sample fiddle: <a href="https://jsfiddle.net/zmLp86dy/" rel="nofollow noreferrer">https://jsfiddle.net/zmLp86dy/</a></p>
  
  <pre><code>.line-row {
      list-style: none;
      font-size: 0;
      height: 22px;
      margin-top: 2px;
      padding-inline-start: 0;
  }
  
  .line-row li {
      display: inline-block;
      border-radius: 0%;
      width: 35px;
      height: 20px;
      margin-top: 2px;
      background: #737373;
      border: 1px solid #000;
      border-right: 0px;
  }
  
  .line-row li:nth-last-of-type(1) {
      border-right: 1px solid #000;
  }
  
  ul li.success {
      background: #00ff00;
  }
  
  ul li.delayed {
      background: #ff0000;
  }
  </code></pre>