Create Complex Borders With Multiple Classes

Styling a data table or other fancy piece of code and need complex border beauty?

You could use individual classes for each of the many possibilities, or you could use just four classes and achieve the same effect. For example:

.t {border-top: 1px solid #000; }
.r {border-right: 1px solid #000;}
.b {border-bottom: 1px solid #000;}
.l {border-left: 1px solid #000;}

And then...

<td class="l">
<td class="t l r">
<td class="t b">

...to your heart's content.

Mix and match with Anton's shorthand for borders, and you've got yourself a quick way to style even the most complex data table.

You can see a sample of this technique in action at http://bitesizestandards.com/files/table.html

Kate Bolin