HTML tab interface using only CSS

Question

is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with CSS 3.0?

Answer 1

It is possible with html and css for most modern browsers using the border-radius property (not supported by internet explorer 8 and below).

css

li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

html

 
tab 1
 
tab 2
 
tab 3

To support internet explorer you can use css3pie but you have to keep in mind that it uses javascript.

You can find more information about border-radius at: http://www.w3.org/TR/css3-background/#the-border-radius

Example: http://jsbin.com/idiza5/2