And you thought that there was nothing more to be said about CSS tabs... In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.

The nice thing about the original mini-tabs is that the border will always be the exact width of the text above it -- but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:

background: url(tab_rounded.gif) no-repeat bottom center;

Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word -- however if you'd like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I'm sure would work well in a vertical list as well. Update: They do.

Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7