Ultra-simple rounded CSS tabs

I have created a demonstration of “Aqua-like CSS tabs”:http://virtuelvis.com/gallery/css/roundedtabs/ that doesn’t require any additional markup. Like my “Rounded corners with CSS”:http://virtuelvis.com/gallery/css/rounded/ demo, it uses “:before and :after”:http://www.w3.org/TR/CSS2/selector.html#before-and-after from CSS2.
Note that this technique is not for everybody, and it is not especially suited if you want everything to look the same in all browsers. For instance, the technique used is utterly incompatible with any version of Internet Explorer, because MSIE doesn’t understand the required pseudo-elements.
However, this technique is well-suited if you need to retrofit tabs to already existing designs without altering your markup.
Note that this is just a quick hack, and I have not attempted to create a fallback rendering that makes the demo look a little prettier in Internet Explorer, even if it is quite easily achieved. And, this being the quick hack it is, comes without any explanations. View source and see what’s going on.

Previous Post

6 Comments

  1. Arve,
    Very nice! The tabs however jump and become slightly misplaced if the anchors are activated, and then tabs hovered.
    The problem with tabs, as I see it, is the content that is displayed if a tab is activated. tabs per se are easy to style.
    M.

  2. The tab jumping should now be fixed (it was a simple matter of presenting two different examples in a rather confusing way, in case anybody wonders).

  3. A page that consistently crashes Safari

    Virtuelvis describes a technique for coding "Aqua-like CSS tabs." Unfortunately, something about this doesn’t agree with Safari 1.1.1 (v100.1) in OS X 10.3.2. I can load the page, but as soon as I move the cursor over a tab Safari…

  4. Arve, I’m posting this through Internet Explorer 5.2 instead of Safari. I can’t spend more than a few seconds on your site without rolling over something that is crashing Safari.
    Anyway, I did post the comment on the other site without a problem. It’s just this page that’s giving me trouble. I usually read it through a RSS aggregator so I never noticed the crashing before.

  5. Ultra-simple rounded CSS tabs

    Ultra-simple rounded CSS tabs — “I have created a demonstration of Aqua-like CSS tabs that doesn’t require any additional markup.”…

  6. Rounded corners in css, a how to at Virtualvis

    Virtualvis shows us css neophytes an excellent example of how to do rounded corners and aqua-like tabs. These look so sweet.