css tabs

<ul class="tabs"> is the starting point, with unadorned <li> inside. You can add "left", "center", or "right" class to the <ul class="tabs"> to change the alignment (default is document direction based), as well as add some space on the margin. You can also add a "merge-up" class to combine a tab list with one immediately preceeding it.

A .small variant is also provided for, with sizes reduced by 15%. Just add the class to your UL, and you're set. If you're merging multiple sets with different alignment, you'll need to add the class to all the merged sets.

The <li>s accept an "active" class to the to make an active/foreground/selected tab. You can also use a "new-group" class to start a new group of tags (i.e., add an space before the tab).

The contents of the <li>s is arbitrary. The demos below are links because that's the typical case, but it can be anything you want, including multi-line tabs, images, etc.

Only browsers with "good" CSS rendering are supported. That includes at least Firefox 3+, IE8+, and Chrome 4.1+. In particular, display: inline-block is required, which seems to be the primary differentiator.

bare (document direction dependent)




left (add right)

center (add left)

right (add left and center)

small left (add right)

customize css

Font Size:
Vertical Padding:
Horizontal Padding:
Border Width:
"Small" Factor:
Active Color:
Inactive Color:
Hover Color:
Border Color:
Extra Class: (for different styles on the same page)

Active CSS

This is the CSS currently rendered into a STYLE block in the HEAD of this document.

 * CSS Tabs
/* colors */
ul.tabs { border-bottom-color: #999; }
ul.tabs li { background-color: #ddd; border-color: #999; }
ul.tabs li.active { background-color: #fff; }
ul.tabs li:hover { background-color: #eee; }
ul.tabs li.active:hover { background-color: #fff; }
/* layout */
ul.tabs { border-bottom-width: 1px; font-size: 14px; line-height: 16px; }
ul.tabs.merge-up { margin-top: -24px; }
ul.tabs li { margin: 0 2px -1px; padding: 3px 6px; border-width: 1px; }
ul.tabs.left { padding: 0 0 0 6px; }
ul.tabs.right { padding: 0 6px 0 0; }
/* everything else */
ul.tabs { list-style: none; margin: 0; padding: 0; border-bottom-style: solid; }
ul.tabs.left { text-align: left; }
ul.tabs.right { text-align: right; }
ul.tabs.center { text-align: center; }
ul.tabs li { list-style: none; display: inline-block; border-style: solid; }
ul.tabs li.new-group { margin-left: 15px; }
ul.tabs li.active { border-bottom-color: transparent; }
/* small layout */
ul.tabs.small { font-size: 11.9px; line-height: 14px; }
ul.tabs.small.merge-up { margin-top: -21.1px; }
ul.tabs.small li { padding: 2.55px 5.1px; }
ul.tabs.small.left { padding-left: 5.1px; }
ul.tabs.small.right { padding-right: 5.1px; }