title: css div inner border only
body: <p>I hope someone can help me.  I am trying to get to this:</p>
  
  <p><img src="https://i.stack.imgur.com/9Teoj.png" alt="enter image description here"></p>
  
  <p>This is what I have so far:</p>
  
  <p><img src="https://i.stack.imgur.com/qpgy2.png" alt="enter image description here"></p>
  
  <p>And below is my current html.  How can I show the border on just the inner portion of the divs (like in the first screenshot)?  Also, how do I make the height and width of each div a square (not rectangular)?  Is it better to use an html table or is this possible using divs?  The html code is dynamically being generated, so I cannot just add the right/left border on the individual divs.</p>
  
  <pre><code>&lt;div style="width: 100%; text-align: center;"&gt;                               
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;S&lt;/span&gt;
      &lt;br/&gt;
      0&amp;#45;0
  &lt;/div&gt;
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;M&lt;/span&gt;
      &lt;br/&gt;
      5&amp;#45;7
  &lt;/div&gt;      
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;T&lt;/span&gt;
      &lt;br/&gt;
      5&amp;#45;7
  &lt;/div&gt;      
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;W&lt;/span&gt;
      &lt;br/&gt;
      5&amp;#45;7
  &lt;/div&gt;      
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;R&lt;/span&gt;
      &lt;br/&gt;
      5&amp;#45;7
  &lt;/div&gt;      
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;F&lt;/span&gt;
      &lt;br/&gt;
      7&amp;#45;5
  &lt;/div&gt;      
  &lt;div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;"&gt;
      &lt;span style="font-weight: bold;"&gt;S&lt;/span&gt;
      &lt;br/&gt;
      0&amp;#45;0
  &lt;/div&gt;
  </code></pre>
  
  <p>  </p>