title: Rounded corner tables with LESS
body: <p>After some digging around on SO I found <a href="https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i">this</a> as the best response for my need of having rounded corners for tables.</p>
  
  <p>Which lead me to the following CSS snippet:</p>
  
  <pre><code>.greytable tr:first-child th:first-child {
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      border-top-left-radius: 5px;
  }
  
  .greytable tr:first-child th:last-child {
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      border-top-right-radius: 5px;
  }
  
  .greytable tr:last-child td:first-child {
      -moz-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
  }
  
  .greytable tr:last-child td:last-child {
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  </code></pre>
  
  <p>Now I'd like to know how I could simplify all these with LESS. I tried the following LESS code:</p>
  
  <pre><code>.border-radius (@v, @h, @radius: 5px) {
      -moz-border-radius-@v@h: @radius;
      -webkit-border-@v-@h: @radius;
      border-@v-@h: @radius;
  }
  </code></pre>
  
  <p>And then invoke it (for the top left corner):</p>
  
  <pre><code>.greytable tr:first-child th:first-child {
      .border-radius('top', 'left')
  }
  </code></pre>
  
  <p>But it doesn't work (error on the second line of the LESS snippet).</p>
  
  <p>Thanks in advance!</p>