Create complex borders with multiple classes

Kate Bolin | 6 May 2006

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

Permanent link | Filed under: Cascading Style Sheets (CSS)

About the Author

Kate Bolin alternates between web design and content production in Nottingham, England, and currently works as the web person for a small NHS project.

When she’s not wrangling XHTML and CSS or fighting for truth, justice, and accessibility, she gets random on Katemonkey.co.uk and attends Multipack meetings. She likes monkeys, sleep, and the little toys you get in Kinder Suprise.

Articles by Kate Bolin

4 Comments

| Post a comment | Comments Feed

trovster : http://www.trovster.com

6 May 2006, 13:59 : Permanent link to comment

You meant .b {border-bottom: 1px solid #000;} correct? And can’t you simplify this by doing the following:

.t, .r, .b, .l {border: 1px solid #000;}
.t {border-width: 1px 0 0 0;}
.r {border-width: 0 1px 0 0;}
.b {border-width: 0 0 1px 0;}
.l {border-width: 0 0 0 1px;}

This means you can easily maintain the colour and size of border across the applied elements.
Michael Odden :

6 May 2006, 16:08 : Permanent link to comment

A very practical approach in many situations, but I dislike the fact that you in this case mix presentation with structure. But again, it will allways depend on the situation. There’s a short gap between beeing of principle and being stupid. :)
oliver : http://ollieman.net

6 May 2006, 16:34 : Permanent link to comment

Simply by assigning elements tags we are performing presentational markup. The point is not if we are adding presentational classes and ids to elements, that’s a inevitable given; the point is if that presentation breaks down, can you still use the information.

In this case, you can.
Chris Wible : http://www.mediafetish.com

6 May 2006, 17:32 : Permanent link to comment

In this case, where a table is assumed, I like this method. Tables have always been a pain to me and anything that makes dealing with their appearance a little easier is fine by me.

Tables could use a little class now and then ;)

Commenting is closed for this article.