Table of Contents
Table of Contents
Design a TabStrip using CSS

Overview

By using CSS style, you can create simple TabStrip styles such as rectangle borders. Below is an example of a TabStrip created by using CSS:

Steps to designing a TabStrip using CSS

1. Define TopGroup style.
TopGroup style applies to the top group area. For this example, the bottom border line (pointed by red arrow) of the tabstrip is often defined in TopGroup's border.

CSS
Copy 
border-bottom-color:#999999;
border-bottom-style:solid;
border-bottom-width:1px;

2. Define tab items' NormalStyle.
The NormalStyle of this sample only has padding settings.
CSS
Copy 
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px; 
PADDING-BOTTOM: 4px; 
PADDING-TOP: 4px;

3. Define tab items' SelectedStyle.

When the tab item is in Selected state, it will have borders around it except the bottom border. Since the bottom border is actually defined by TopGroup's style, the whole item needs to shift down to cover the TopGroup's bottom border line.

This is an example BEFORE shifting down the tab item:

This is an example AFTER shifting down the item, note that the item covers the bottom line:

CSS
Copy 
POSITION: relative; 
TOP: 1px; 
BACKGROUND-COLOR: white; 
PADDING-RIGHT: 1px; 
PADDING-LEFT: 1px; 
PADDING-BOTTOM: 5px;
PADDING-TOP: 2px; 
BORDER-RIGHT: #999999 1px solid; 
BORDER-TOP: #999999 1px solid; 
BORDER-LEFT: #999999 1px solid; 
BORDER-BOTTOM-STYLE: none;

It is important that the background color has to be defined so that it can cover the group's bottom line.