Making custom tabs in CSS

Tab customization is a common task in the CSS world. Obviously this is done by using background images. The point of the problem is that you have to make it flexible, so that it follows the width of the tab caption. It's a bit related to the skinning issues of UI systems, where you have to split the template to many small parts (borders, corners etc.).

Well, in CSS, for the classic and average tab customization, image splitting is simply not needed. Though generally CSS coders don't recognize this. They split the tab image in two, or in the worst case, three parts: a left side, a middle part, and a right side. But, again, this is unnecessary.

Just look at this simple markup:





A tab link is an <a> element, and the caption is wrapped in a <span>. Both have the same custom background image, which is the tab template.
It's wide enough to make the long captions fit in. So in one element the tab image is left aligned, while in the other is right aligned, so we see both sides of the template. But how is that one layer doesn't overlap the other side?

This is where if a CSS designer isn't smart enough, he or she cuts off one (e.g. the left) side of the image to make it overlayed above the other layer (which has the right aligned background). Because he/she doesn't realise that cutting also can be performed with CSS. See that blue rectangle around the Search tab? That is the span element, which has the left aligned background. It has a 12px right-margin to leave space for the underlying <a> tag showing the right side.