title: CSS float items with borders - But not on each side
body: <p><strong>Question</strong></p>
  
  <p>I have a simple floated list with borders on each item, but not on each side.</p>
  
  <ul>
  <li>The grid I'm trying to create looks very much like this character #</li>
  <li>Full borders on each item on the inside, no containing border surrounding it, no outline.</li>
  </ul>
  
  <p>How?</p>
  
  <p><strong>The example</strong></p>
  
  <ul>
  <li>In the example there are bottom borders to the last items. They should not be there.</li>
  <li>In the example there are right borders on the edge to the right. They should not be there.</li>
  <li>The first and the third item are correct in the first list.</li>
  <li>The first and the second items are correct in the second list.</li>
  </ul>
  
  <p><strong>Fiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/j0bLa6ve/4/" rel="nofollow">jsfiddle</a> (Updated with expected result)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      &lt;li&gt;Four&lt;/li&gt;
      &lt;li&gt;Five&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;ul class="three"&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      &lt;li&gt;Four&lt;/li&gt;
      &lt;li&gt;Five&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;Expected result&lt;/h2&gt;
  
  &lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li style="border-right: none;"&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
       &lt;li style="border-right: none;"&gt;Four&lt;/li&gt;
      &lt;li style="border-bottom: none;"&gt;Five&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;ul class="three"&gt;
    &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li style="border-right: none;"&gt;Three&lt;/li&gt;
       &lt;li style="border-bottom: none;"&gt;Four&lt;/li&gt;
      &lt;li style="border-bottom: none;"&gt;Five&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>li {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      width: 50%;
      float: left;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      list-style: none;
      padding: 30px;
  }
  
  ul {
      margin-bottom: 20px;
      overflow: hidden;
  }
  
  ul.three li {
      width: 33.33%;
  }
  </code></pre>