title: How do I properly apply a border-radius to a table?
body: <p>I've long used the simple method for applying border-radius to tables, which is looking for each corner cell and applying the radius for that corner to each of those cells, like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>table &gt; :first-child &gt; tr:first-of-type &gt; :first-child { border-radius: 5px 0 0 0 }
  table &gt; :first-child &gt; tr:first-of-type &gt; :last-child { border-radius: 0 5px 0 0 }
  table &gt; :last-child &gt; tr:last-of-type &gt; :first-child { border-radius: 0 0 0 5px }
  table &gt; :last-child &gt; tr:last-of-type &gt; :last-child { border-radius: 0 0 5px 0 }
  </code></pre>
  
  <p>Now, this works all fine and dandy for your <em>average</em> table which is a perfect grid of rows and columns with no random row-spans or column-spans. But, what happens when you start including those? It messes everything up. Take, for example, this table where the last row only has a single cell in it, where the next three are spanned from the previous row:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Item 1&lt;/td&gt;
          &lt;td rowspan="2"&gt;Description for both Item 1 and Item 2&lt;/td&gt;
          &lt;td rowspan="2"&gt;Option for Items 1 &amp; 2&lt;/td&gt;
          &lt;td rowspan="2"&gt;Option for Items 1 &amp; 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Item 2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What happens here is that the <em>bottom-right</em> border radius get applied to that single "Item 2" cell because it's both the first and last child in the last row, and the bottom-right corner ends up overriding it.</p>
  
  <p><img src="https://i.stack.imgur.com/AjZaO.jpg" alt="Table border radius"></p>
  
  <p>This would be easy to fix if it were a column-span issue, as I could just add another line below that CSS for <code>:only-child</code> which would apply both the bottom-left and bottom-right radius to that single item. But what about when it's a row-span that's throwing it off?</p>
  
  <p>How can I account for row-spans and apply the appropriate border-radius to each corner of a table?</p>