Rounded corner tables with LESS

Question

After some digging around on SO I found this as the best response for my need of having rounded corners for tables.

Which lead me to the following CSS snippet:

.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;
}

Now I'd like to know how I could simplify all these with LESS. I tried the following LESS code:

.border-radius (@v, @h, @radius: 5px) {
    -moz-border-radius-@v@h: @radius;
    -webkit-border-@v-@h: @radius;
    border-@v-@h: @radius;
}

And then invoke it (for the top left corner):

.greytable tr:first-child th:first-child {
    .border-radius('top', 'left')
}

But it doesn't work (error on the second line of the LESS snippet).

Thanks in advance!

Wesley Murch · Accepted Answer · 2012-03-02T10:15:56.500

You might need to use the string interpolation syntax, try this:

.border-radius (@v, @h, @radius: 5px) {
    -moz-border-radius-@{v}@{h}: @radius;
    -webkit-border-@{v}-@{h}-radius: @radius;
    border-@{v}-@{h}-radius: @radius;
}

I would also add that webkit and mozilla are largely up to speed with the standard border-radius property, and the vendor prefixes are becoming outdated for it.

EDIT: It seems that string interpolation isn't working out for this task (the above code won't compile), so here's a workaround mixin that will actually be easier to use:

.rounded-table(@radius) {
    tr:first-child th:first-child {
        -moz-border-radius-topleft: @radius;
        -webkit-border-top-left-radius: @radius;
        border-top-left-radius: @radius;
    }
    tr:first-child th:last-child {
        -moz-border-radius-topright: @radius;
        -webkit-border-top-right-radius: @radius;
        border-top-right-radius: @radius;
    }
    tr:last-child td:first-child {
        -moz-border-radius-bottomleft: @radius;
        -webkit-border-bottom-left-radius: @radius;
        border-bottom-left-radius: @radius;
    }
    tr:last-child td:last-child {
        -moz-border-radius-bottomright: @radius;
        -webkit-border-bottom-right-radius: @radius;
        border-bottom-right-radius: @radius;
    }
}

Usage:

.greytable {
    .rounded-table(10px)
}

Output:

.greytable tr:first-child th:first-child {
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
}
.greytable tr:first-child th:last-child {
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}
.greytable tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.greytable tr:last-child td:last-child {
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

I fixed my hardcoding mistake, you can edit accordingly. Many thanks! — janosrusiczki, Mar 02 '12 at 09:17
Yeah I'm stumped and too tired to figure it out at the moment. I'll check in tomorrow and see how you made out. — Wesley Murch, Mar 02 '12 at 09:53
I think that string interpolation just isn't available to use this way, which I was not aware of. I can't seem to get it to work at all for properties, and even in values it only works when it's in a quoted string... — Wesley Murch, Mar 02 '12 at 09:59
OK, you're back in my graces with an accepted answer. Thank you for your time! — janosrusiczki, Mar 02 '12 at 13:06

Rounded corner tables with LESS

1 Answers1

Linked